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

最新推荐文章于 2025-05-15 09:26:47 发布

原创最新推荐文章于 2025-05-15 09:26:47 发布 · 1w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#html #导航 #jquery

jquery 同时被 2 个专栏收录

10 篇文章

订阅专栏

移动开发

5 篇文章

订阅专栏

本文介绍了如何在网页中创建一个导航栏，当页面滚动到一定位置时，导航栏会固定在顶端。通过设置position为fixed来实现固定效果，并通过jQuery的addClass和removeClass方法切换导航栏的状态。此外，还讨论了如何处理因fixed定位导致的页面空白问题，通过添加占位元素来保持页面布局稳定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

　　　　　　　　　　　　这里写图片描述
　　思路很简单，首先将页面整体结构确定下来，最外层套一个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');