[导航跟随]jQuery - 多个菜单导航滚动跟随，全部积累置顶在顶端，向上拉时返回原位置_js/jQuery

资料来源：网络整理时间：2023/3/4 0:57:10 共计：3629 浏览

之前写过几篇导航跟随文章，基本都是比较简单的单个导航跟随，如：《jQuery 导航菜单、广告 —— 固定、置顶、跟随》、《jQuery 智能判断跟随页面滚动的导航、菜单、广告，下拉后跟随置顶特效代码》，这两个导航跟随案例，都属于比较简单的单导航跟随代码！

还有另外一个《jQuery高亮楼层导航插件One-Page-Nav - 横向、纵向高亮楼层导航特效》这个主要是随着下拉，会自动高亮导航菜单，可以制作固定侧边导航使用。

今天来分享的是多个导航菜单如何全部跟随固定在顶端的方法（亲测可用）！

方法一，使用jquery实现：

可以实现多个导航菜单在滚动过程中全部跟随固定在浏览器顶端！

代码分享如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery实现多个导航菜单全部跟随固定在浏览器顶端</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<style>
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;
}
</style>
</head>
<body>
<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>
<script>
  $.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);
</script>
</body>
</html>

方法二：使用原始JS也可以实现下拉跟随置顶，上拉返回原始位置：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        #header{
            position: fixed;
            top: 0;
            left: 0;
            height: 30px;
            width: 100%;
            background: #555;
            opacity: 0.8;
        }
        #nav,.nav{
            height: 30px;
            width: 100%;
            background: #000;
            opacity: 0.8;
        }
        .fixed{
            position: fixed;
            top:30px;
            left:0;
        }
    </style>
</head>
<body>
<div id="header"></div>
<div style="margin-top:30px;">
<script type="text/javascript">
    //document.write('<div id="nav"></div>');
    for(var i=0;i<100;i++)
        document.write('<div>'+i+' hello world'+'</div>');
</script>
</div>
<div id="nav"></div>
<script type="text/javascript">
    for(var i=100;i<200;i++)
        document.write('<div>'+i+' hello world'+'</div>');
</script>
<script type="text/javascript">
function getElementViewTop(element){
　　var actualTop = element.offsetTop;
　　var current = element.offsetParent;
　　while (current !== null){
        actualTop += current.offsetTop;
        current = current.offsetParent;
　　}
    var elementScrollTop=0;
　　if (document.compatMode == "BackCompat"){
        elementScrollTop=document.body.scrollTop;
　　} else {
        elementScrollTop=document.documentElement.scrollTop; 
　　}
    return actualTop;
　//　return actualTop-elementScrollTop;
}
function getScroll()
{
    var top, left, width, height;
 
    if (document.documentElement && document.documentElement.scrollTop) {
        top = document.documentElement.scrollTop;
        left = document.documentElement.scrollLeft;
        width = document.documentElement.scrollWidth;
        height = document.documentElement.scrollHeight;
    } else if (document.body) {
        top = document.body.scrollTop;
        left = document.body.scrollLeft;
        width = document.body.scrollWidth;
        height = document.body.scrollHeight;
    }
    return { 'top': top, 'left': left, 'width': width, 'height': height };
}
var nav = document.getElementById('nav');   
var posTop = getElementViewTop(nav);
window.addEventListener('scroll',function(event){
    var scrollTop = getScroll().top;
    var output = document.getElementById('output');
    output.innerHTML = posTop +' '+scrollTop+' '+(posTop-scrollTop);
    if(posTop>=30 && posTop-scrollTop <= 30) 
        nav.className = 'nav fixed';
    else nav.className = 'nav';
},false);
</script>
<div id="output" style="position:fixed;width:60px;height:60px;right:100px;bottom:100px;background:#DDD">0</div>
</body>
</html>

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：CSS：padding实现两栏自适应 - 图片与文字左右排列，文字自适应不限宽度_CSS学习 | ·下一条：css让图片自适应容器（div）大小,超便捷响应式图片自适应_CSS学习