首页 > 其他分享 >博文发布到首页测试

博文发布到首页测试

时间:2022-11-21 15:33:17浏览次数:43  
标签:top 博文 height 学习 首页 测试 sidebar

HTML代码:

<div id="header">header</div>
  <div id="sidebarWrap">
  <div id="sidebar">Sidebar</div>
</div>
<div id="main">Main</div>
<div id="footer">footer</div>

CSS代码:

<style>
body {
  margin: 10px auto;
  font-family: sans-serif;
  width: 500px;
}

div {
  border-radius: 5px;
  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
  border: 1px solid #ccc;
  padding: 5px;
}

#sidebarWrap {
  height: 400px;
  width: 210px;
  float: right;
  position: relative;
  box-shadow: none;
  border: none;
  margin: 0;
  padding: 0;
}

#main {
  width: 270px;
  height: 4000px;
}

#footer {
  clear: both;
  margin: 10px 0;
}

#sidebar {
  width: 200px;
  height: 300px;
  position: absolute;
}

#header {
  height: 200px;
  margin-bottom: 10px;
}

#sidebar.fixed {
  position: fixed;
  top: 0;
}

#footer {
  height: 600px;
}

#footer {
  height: 600px;
}
</style>

学习平时的知识,只是近来学习一点点,测试博文发布到首页。学习平时的知识,只是近来学习一点点,测试博文发布到首页。学习平时的知识,只是近来学习一点点,测试博文发布到首页。学习平时的知识,只是近来学习一点点,测试博文发布到首页。学习平时的知识,只是近来学习一点点,测试博文发布到首页。学习平时的知识,只是近来学习一点点,测试博文发布到首页。学习平时的知识,只是近来学习一点点,测试博文发布到首页。
jQuery代码:

<script>
$(function() {
  var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
  var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));

  var maxY = footTop - $('#sidebar').outerHeight();
			
  $(window).scroll(function(evt) {
    var y = $(this).scrollTop();
    if (y > top) {
      if (y < maxY) {
	$('#sidebar').addClass('fixed').removeAttr('style');
      } else {
	$('#sidebar').removeClass('fixed').css({
	  position: 'absolute',
	  top: (maxY - top) + 'px'
	});
      }
    } else {
      $('#sidebar').removeClass('fixed');
    }
  });
});
</script>

标签:top,博文,height,学习,首页,测试,sidebar
From: https://www.cnblogs.com/songyan/p/16911538.html

相关文章

  • 渗透测试基础知识
    域名:1.什么是域名2.域名在哪里注册? 万网,阿里云3.什么是二级域名多级域名?顶级域名(一级域名):分为三类: 国家顶级域名  (例如 中国.cn 美国.us)、地区顶级域名......
  • ReentrantLock测试
     博客:https://www.jianshu.com/p/7058c21e615epublicstaticvoidmain(String[]args){test3();}publicstaticvoidtest1(){Ru......
  • 软件测试PIE模型
    bug分为fault:静态存在的问题(程序中存在的error:程序中存在问题但是没有触发出来(测试结果有误但是机缘巧合跟实际结果一样)failure:程序中存在问题并且触发......
  • 47、OAK测试FeatureTracker节点和ImageManip节点
    基本思想:继续学习oak的例子和硬件模块cmakelists.txtcmake_minimum_required(VERSION3.16)project(depthai)set(CMAKE_CXX_STANDARD11)find_package(OpenCVREQUIRED)#mes......
  • 单元测试:会变化的定义
    有一种东西,如果它太小,需要付出的努力就太大;如果它太大,就很难测试。没错!它是单元。但是什么才是一个好的单元定义呢?为什么它如此重要? 单元的定义对测试过程有很大的......
  • postman接口测试工具汉化教程
    1.汉化包地址 https://github.com/hlmd/Postman-cn/releases?page=1下载对应版本下的app.zip解压后放到postman安装路径下的版本号目录下的resources文件夹中  2.......
  • 作为一名测试工程师,我为什么要写博客?
    第一篇文章,讲讲自己为什么要写博客点点点手工测试的逆袭一般和开发一样分两步:让自己变得牛逼,让别人知道你牛逼.首先作为一名测试工程师,我的工作就是跟进版本,编写测试......
  • 2013-11-11 Oracle 课堂测试 练习题 例:BULK COLLECT及return table
    --1)查询“计算机”专业学生在“2007-12-15”至“2008-1-8”时间段内借书的--学生编号、学生名称、图书编号、图书名称、借出日期;selects.stuid,s.stuname,b.bid,b.ti......
  • 操作系统 测试题
    一、单选1、下面哪项不是常用调度算法A、FCFS B、SJF C、HRN D、ABC2、响应比的计算方法是A、(作业等待时间+作业执行时间)/作业执行时间B、(作业等待时间+作业执行时间)/......
  • C# WPF 测试直接绑定依赖属性双向传递是没有问题的
    续这篇测试:https://www.cnblogs.com/huvjie/p/16909290.html测试页面:<Windowx:Class="MyWPFSimple3.MainWindow"xmlns="http://schemas.microsoft.com/winfx/......