双菜单固定在动画滚动上

Question

我尝试制作一个双动画滚动菜单。我的意思是，我的设计有2个菜单。 一个顶部菜单和另一个页面菜单。 当我滚动时，两个菜单都将固定在顶部。 就像我的截图一样。

当我单击概述/功能/白皮书... div将概述/功能/白皮书div将滚动并显示...

我的DIV可以工作...但是第二个菜单没有固定在滚动条下。

检查第二个屏幕截图... 点击查看全部

这是我的代码示例：

 jQuery("document").ready(function($){ var poss = $('.inner-page-navs').offset().top; var navs = $('.inner-page-navs'); $(window).scroll(function () { if ($(this).scrollTop() > poss) { navs.addClass("f-navs"); (".inner-page-navs").fadeIn(3000); ('.inner-page-navs').addClass("f-navs"); } else { navs.removeClass("f-navs"); } }); }); jQuery("document").ready(function($){ var pos = $('.inner-page-nav').offset().top; var nav = $('.inner-page-nav'); $(window).scroll(function () { if ($(this).scrollTop() > pos) { nav.addClass("f-nav"); (".inner-page-nav").fadeIn(3000); ('.inner-page-nav').addClass("f-nav"); } else { nav.removeClass("f-nav"); } }); }); $(window).load(function(){ $("a.scroll_to").click(function() { var target = $(this).attr("data-more-info"); $("html, body").animate({ scrollTop: $("#"+target).offset().top - 50 }, "slow"); return false; }); }); 

 html, body, div {padding:0;margin:0;} .inner-page-navs{ background: #E5F6FE;} .f-navs{ z-index: 2900; position: fixed; left: 0; top: 0; width: 100%;margin-top:0px;} /* this make our menu fixed top */ .page-nav-contents {height: 42px;margin: 0 auto;max-width: 1170px;width: 100%;} .page-nav-contents ul { list-style: none;margin: 0; } .page-nav-contents ul li{float: left; margin: 0px 2px; padding: 10px 70px !important;} .navactive{background:#A1DDFF;} .navactive a{color:#fff;} .page-nav-contents ul li:hover{background:#A1DDFF;} .page-nav-contents ul li:hover a{color:#fff;} .page-nav-contents ul li a {font-size: 25px;line-height: 25px;} .page-nav-contents ul li a:hover {text-decoration:none;color:#fff;} /** end 1st menu **/ .inner-page-nav{ background: #E5F6FE;} .f-nav{ z-index: 99999; position: fixed; left: 0; top: 0; width: 100%;margin-top:60px;} /* this make our menu fixed top */ .f-nav .navOverview {margin-top:100px !important;} .page-nav-content {height: 42px;margin: 0 auto;max-width: 1170px;width: 100%;} .page-nav-content ul { list-style: none;margin: 0; } .page-nav-content ul li{float: left; margin: 0px 2px; padding: 10px 70px !important;} .navactive{background:#A1DDFF;} .navactive a{color:#fff;} .page-nav-content ul li:hover{background:#A1DDFF;} .page-nav-content ul li:hover a{color:#fff;} .page-nav-content ul li a {font-size: 25px;line-height: 25px;} .page-nav-content ul li a:hover {text-decoration:none;color:#fff;} /** End 2nd menu **/ .clear{clear:both;} .box{width:100%;height:350px;min-width:600px;padding:0;margin:0;} .red{background:red;} .green{background:green;} .blue{background:blue;} .grey{background:grey;} .yellow{background:yellow;} a.scroll_to{ color:#f00; cursor:pointer; display: inline-block; border:1px solid #ccc; padding:2px 5px; background-color:#fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <div id="inner-page-navs" class="inner-page-navs"> <div class="page-nav-contents"> <ul> <li class="navactive"><a href="#navhome" >Home</a></li> <li class=""><a href="#navservice" >Service</a></li> <li class=""><a href="#navsupport" >Support</a></li> <li class=""><a href="#navpricing" >Pricing</a></li> </ul> <div class="clear"></div> </div> </div> <div class="box red"></div> <div id="inner-page-nav" class="inner-page-nav"> <div class="page-nav-content"> <ul> <li><a class="scroll_to" data-more-info="navOverview">Overview</a></li> <li><a class="scroll_to" data-more-info="navFeatures">Features</a></li> <li><a class="scroll_to" data-more-info="navWhiteBro">Whitepaper & Brochure</a></li> <li><a class="scroll_to" data-more-info="navOrder">Order</a></li> </ul> <div class="clear"></div> </div> </div> <div class="box green" id="navOverview"><h2>Overview</h2></div> <div class="box blue" id="navFeatures"><h2>Features</h2></div> <div class="box grey" id="navWhiteBro"><h2>Witepaper and Brochure</h2></div> <div class="box yellow" id="navOrder"><h2>Order</h2></div> 

请不要给我减号。 我真的很努力学习并做到这一点..但是我做不到。 希望有人帮助我。 谢谢

Answer 1

            jQuery("document").ready(function($){
            var poss = $('.inner-page-navs').offset().top;
            var navs = $('.inner-page-nav2').offset().top;;

            $(window).scroll(function () {
            if ($(this).scrollTop() > navs) {

                $('.inner-page-nav2').addClass("f-navs");
                $(".inner-page-nav").fadeIn(3000);
                $('.inner-page-nav2').addClass("f-navs");
            } else {
                $('.inner-page-nav2').removeClass("f-navs");
            }
            });
            });

            jQuery("document").ready(function($){
            var pos = $('.inner-page-nav').offset().top;
            var nav = $('.inner-page-nav2');

            $(window).scroll(function () {
            if ($(this).scrollTop() > pos) {
                nav.addClass("f-nav");
                (".inner-page-nav").fadeIn(3000);
                ('.inner-page-nav2').addClass("f-nav");
            } else {
                nav.removeClass("f-nav");
            }
            });
            });

            $(window).load(function(){
                $("a.scroll_to").click(function() {
                  var target = $(this).attr("data-more-info");
                  $("html, body").animate({ scrollTop: $("#"+target).offset().top - 50 }, "slow");
                  return false;
                });
            });

            <div id="inner-page-navs" class="inner-page-navs">
              <div class="page-nav-contents">
                <ul>
                  <li class="navactive"><a href="#navhome" >Home</a></li>
                  <li class=""><a href="#navservice" >Service</a></li>
                  <li class=""><a href="#navsupport" >Support</a></li>
                  <li class=""><a href="#navpricing" >Pricing</a></li>
                </ul>
              <div class="clear"></div>
              </div>
            </div>
            <div class="box red"></div>
            <div id="inner-page-nav" class="inner-page-nav2">
              <div class="page-nav-content">
                <ul>
                  <li><a class="scroll_to" data-more-info="navOverview">Overview</a></li>
                  <li><a class="scroll_to" data-more-info="navFeatures">Features</a></li>
                  <li><a class="scroll_to" data-more-info="navWhiteBro">Whitepaper & Brochure</a></li>
                  <li><a class="scroll_to" data-more-info="navOrder">Order</a></li>
                </ul>
              <div class="clear"></div>
              </div>
            </div>
            <div class="box green" id="navOverview"><h2>Overview</h2></div>
            <div class="box blue" id="navFeatures"><h2>Features</h2></div>
            <div class="box grey" id="navWhiteBro"><h2>Witepaper and Brochure</h2></div>
            <div class="box yellow" id="navOrder"><h2>Order</h2></div>