8.3 nav fixed

其实这一步是很简单的了.就是拿出自己与顶部的距离(offsettop)跟页面滚动的距离scrollTop 做比较 代码如下
<script src="myFn.js"></script>
<script>
window.onload = function (){
// 获取标签
var nav = document.getElementById('nav');
var myTop = nav.offsetTop;//导航条自有的top.用它的top来判断当滚动到它这个位置的时候 nav 就 fixed
//监听滚动
window.onscroll = function (){
//获取滚动的距离
var scrollT = scroll().top;
if(scrollT>=myTop){//如果滚动的top = nav.offsetTop 就执行下面的代码
//设置nav固定,设置位置
nav.style.position = 'fixed';
nav.style.left = 0;
nav.style.top = 0;
}else{//如果不是就执行这里的代码
//设置位置为原来的位置设置
nav.style.position = 'static';
}
}
}
</script>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 1,918评论 0 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,826评论 1 92
  • 一、场景 需求:tab需要在划出视口的时候吸顶(sticky),方便点击切换下方内容。 二、方案 1、采用scro...
    玲儿珑阅读 3,063评论 0 1
  • 当我们告诉别人我们在学书法的时候 我们是否真的搞清楚了书法是什么? 当别人问到我们一些书法的常识问题时 我们是否能...
    雲胡不喜joy阅读 1,409评论 0 3
  • 分布式系统里的Shuffle 阶段往往是非常复杂的,而且分支条件也多,我只能按着我关注的线去描述。肯定会有不少谬误...
    祝威廉阅读 18,720评论 5 30