Javascript 一旦标题滚动过去，修复页面顶部的菜单栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14499024/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fix menu bar at top of page once header has been scrolled past
提问by harryg
Firstly I apologise if this is too open-ended a question.
首先，如果这是一个过于开放的问题，我深表歉意。
I am aware of making the header of a web page static so it is always visible at the top of the viewport and the content passes beneath it as you scroll down. This can be achieved purely with css.
我知道将网页的标题设为静态，因此它始终在视口的顶部可见，并且当您向下滚动时，内容会从其下方通过。这可以完全用 css 来实现。
I was wondering how you would achieve letting the header scroll off the page but leave a horizontal menu bar static at the top. http://www.forexfactory.comis a perfect example of this.
我想知道您将如何实现让标题滚出页面，但在顶部留下一个静态的水平菜单栏。http://www.forexfactory.com就是一个很好的例子。
I see it calls a JavaScript function onHeaderComplete.execute()which I assume applies extra css style to the nav bar when the header scrolls off but I'm unsure of how it works. Any basic explanation appreciated as my JavaScript skills are relatively limited.
我看到它调用了一个 JavaScript 函数onHeaderComplete.execute()，我认为该函数在标题滚动时将额外的 css 样式应用于导航栏，但我不确定它是如何工作的。任何基本解释都值得赞赏，因为我的 JavaScript 技能相对有限。
回答by Sowmya
I just answered similar question. CHECK THIS QUESTION
我刚刚回答了类似的问题。检查这个问题
$(function(){
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#stickyheader').css({position: 'fixed', top: '0px'});
$('#stickyalias').css('display', 'block');
} else {
$('#stickyheader').css({position: 'static', top: '0px'});
$('#stickyalias').css('display', 'none');
}
});
});
回答by sandeep
You can write like this:
你可以这样写：
$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
$('div').addClass('fix');
} else {
$('div').removeClass('fix');
}
});
CSS
CSS
.fix{
position:fixed;
top:0;
left:0;
right:0;
margin:0;
}
Check this http://jsfiddle.net/a42qB/
回答by Ange Loron
You could also do it with pure CSS by creating your menu twice. It's not ideal but it gives you the opportunity have a different design for the menu once it's on top and you'll have nothing else than CSS, no jquery:
您也可以通过创建两次菜单来使用纯 CSS 来实现。这并不理想，但它让您有机会在菜单顶部有不同的设计，并且除了 CSS 和 jquery 之外别无他物：
<div id="hiddenmenu">
THIS IS MY HIDDEN MENU
</div>
<div id="header">
Here is my header with a lot of text and my main menu
</div>
<div id="body">
MY BODY
</div>
And then have the following CSS:
然后有以下CSS：
#hiddenmenu {
position: fixed;
top: 0;
z-index:1;
}
#header {
top: 0;
position:absolute;
z-index:2;
}
#body {
padding-top: 80px;
position:absolute;
z-index: auto;
}
Here is a fiddle for you to see: https://jsfiddle.net/brghtk4z/1/
这是一个给你看的小提琴：https: //jsfiddle.net/brghtk4z/1/
