javascript - 固定在动画滚动上的双菜单

Question

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

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

我的 DIV 可以工作...但是第二个菜单在我的滚动条下没有修复..我如何解决它？

检查第二个屏幕截图... Click to full view

这是我的代码示例:

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>