[英]Double Menu Fixed on Animated Scroll
I try to made an double animated scroll menu.. I mean, my design have 2 menu. 我尝试制作一个双动画滚动菜单。我的意思是,我的设计有2个菜单。 1 top menu and another page menu.
一个顶部菜单和另一个页面菜单。 when I scroll both menu will fixed on top.
当我滚动时,两个菜单都将固定在顶部。 like my screenshot.
就像我的截图一样。
When I click overview/features/whitepaper... div will overview/features/whitepaper div will scroll and show... 当我单击概述/功能/白皮书... div将概述/功能/白皮书div将滚动并显示...
My DIV Will work... but 2nd menu not fixed under my scroll.. how I slove it? 我的DIV可以工作...但是第二个菜单没有固定在滚动条下。
Check 2nd screenshot ... Click to full view 检查第二个屏幕截图... 点击查看全部
Here is my code example: 这是我的代码示例:
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>
Please don't give me minus. 请不要给我减号。 I really try hard to learn and make this.. but I'm unable to do it properly.
我真的很努力学习并做到这一点..但是我做不到。 Hope someone help me.
希望有人帮助我。 Thanks
谢谢
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.