跟随屏幕滚动后固定导航到顶端

来源：互联网发布：遗传算法原理及应用pdf 编辑：程序博客网时间：2024/06/05 06:15

From: http://blog.csdn.net/zerlinda_c/article/details/50436920

在浏览网站的时候看到许多不错的效果，比如导航栏滚动一定距离后固定到某一位置。最近做手机端的页面比较多，就想如果多个导航栏叠加能否也将导航栏固定在不同位置呢？其实代码很简单，看一下实际效果：
　　　　　　　　这里写图片描述

　　　　　　　　　　　　这里写图片描述
　　思路很简单，首先将页面整体结构确定下来，最外层套一个div是常识，然后就是导航和内容的分离。由于html整个文档默认从上到下渲染，而我们要做的是在对象滑到顶端的时候将其固定到顶端，所以要将其position属性设置为fixed，于是其就脱离普通文档流而固定在页面了。
　　但这样会有一个问题，脱离了文档流以后页面会空出一个距离，这就导致后面的元素会向上移动从而补充这个空位，这样看起来就会给浏览用户摸不着头脑的感觉，为什么页面会突然一下往上跑了？
　　怎样不让后面的元素往上移呢？答案很简单，把空出来的位置固定一个元素占位不就好了，比如原来的导航占位的高度是100px，当它脱离文档流的时候我们在原位置加100px不就好了，这样是可行的吧。所以有了这个思路就开始动手了：结果是我们在原来的导航标签外再套一个div，高度固定跟导航的高度一样。这样，问题就解决了，不管导航跑到哪里整个页面的布局都是一定的。
　　那么怎样切换元素的fixed属性？当元素滚动到页面的一定位置，我们想要它固定，而当页面再滑动回来的时候，我们又想要它回归到普通的文档流跟随页面滚动。这样想，我们设定一个条件，当元素满足条件的时候是一个状态，而不满足的时候是另一个状态。说到这里，就明白了，我们要为元素添加两个类，每个类代表一个状态，一个是position： fixed, 而另一个自然是static了。对于状态的切换对应到类的切换。jq的addClass和removeClass是很方便的。
　　再解释一下：
　　

$.fn.fixedDiv = function(actCls, i)

　　.fn.fixedDiv是对jq对象扩展的一种方法，所有jq对象将共同拥有该方法，所以我们可以直接使用 (‘#fix1’).fixedDiv(‘fix-div’, 0);
　　如果你的导航栏只有一行，那么其中的参数i 是0，i的意义是方便计算元素固定的位置。因为scrollTop=offsetTop时，元素是处于页面顶端的。假设要让元素固定到距离视口顶端100px，那么只需要页面滚动到scrollTop = offsetTop - 100即可。
代码写的并不严谨，还有许多不足之处：
html

<div class = "wraper">    <div class = "target">        <div class = "clear">            <div class = "toggle" id = "fix1">1</div>        </div>         <div id = "div1"></div>    </div>    <div class = "target">        <div class = "clear">            <div class = "toggle" id = "fix2">2</div>        </div>        <div id = "div2"></div>    </div>    <div class = "target">        <div class = "clear">            <div class = "toggle" id = "fix3">3</div>                    </div>        <div id = "div3"></div>    </div>    <div class = "target">        <div class = "clear">            <div class = "toggle" id = "fix4">4</div>                   </div>         <div id = "div4"></div>    </div>    <div class = "target">        <div class = "clear">            <div class = "toggle" id = "fix5">5</div>                    </div>        <div id = "div5"></div>    </div></div>

css

body {    margin: 0;    padding: 0;    text-align: center;}.wraper {    width: 80%;    display: inline-block;    border: 2px solid #CC9;    border-top: none;}.toggle {    height: 50px;    line-height: 50px;    border-top: 2px solid #CC9;    background: #3FF;}.clear {    width: 100%;    height: 52px;}#div1, #div2, #div3, #div4, #div5 {    width: 100%;    height: 500px;    background: #666;}.fix-div{     margin: 0 auto;    position: fixed;    width: 80%;     left: 0;     right: 0;    z-index: 99999;}

$.fn.fixedDiv = function(actCls, i){        var that = $(this),            h = that.height(),            topVal = (h + 2) * i,            offsetTop = that.offset().top,            scrollTop;        function fix(){            scrollTop = $(document).scrollTop();               console.log("offsetTop: " + offsetTop);            console.log("scroll: " + screenTop);            if (scrollTop > (offsetTop - topVal)) {                that.addClass(actCls);                that.css("top", topVal + "px");                            } else {                that.removeClass(actCls);            }        }        fix();        $(window).scroll(fix);    }    $('#fix1').fixedDiv('fix-div', 0);    $('#fix2').fixedDiv('fix-div', 1);    $('#fix3').fixedDiv('fix-div', 2);    $('#fix4').fixedDiv('fix-div', 3);    $('#fix5').fixedDiv('fix-div', 4);

如果你只有一个顶部的导航，那么代码就更简单了，只需简单更改一下：

.fix-div{     margin: 0 auto;    position: fixed;    width: 80%;     top: 0;       //只有一个导航所以top值固定    left: 0;     right: 0;    z-index: 99999;}$.fn.fixedDiv = function(actCls){        var that = $(this),            offsetTop = that.offset().top,            scrollTop;        function fix(){            scrollTop = $(document).scrollTop();               if (scrollTop > offsetTop ) {                that.addClass(actCls);            } else {                that.removeClass(actCls);            }        }        fix();        $(window).scroll(fix);    }    $('#fix1').fixedDiv('fix-div');

0 0