美文网首页
8.3 nav fixed

8.3 nav fixed

作者: 康轩 | 来源:发表于2017-05-30 21:38 被阅读0次

    其实这一步是很简单的了.就是拿出自己与顶部的距离(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>

    相关文章

      网友评论

          本文标题:8.3 nav fixed

          本文链接:https://www.haomeiwen.com/subject/sezrfxtx.html