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

之前写过几篇导航跟随文章，基本都是比较简单的单个导航跟随，如：《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;
    i100;
    i++)        document.write('div>
    '+i+' hello world'+'/div>
    ');
    /script>
    /div>
    div id="nav">
    /div>
    script type="text/javascript">
        for(var i=100;
    i200;
    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>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！