twitter-bootstrap 滚动过去时导航栏粘在屏幕顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20327505/
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
Navbar stick to top of screen when scrolling past
提问by Rasmus R
I am making a website, where I want the navbar to change its position to 'fixed' when I scroll past it.
我正在制作一个网站，当我滚动浏览它时，我希望导航栏将其位置更改为“固定”。
There is a problem though. The design completely messes up when I change its position value. See www.rowweb.dk/skyline/ - I'm using Bootstrap by the way.
但是有一个问题。当我改变它的位置值时，设计完全混乱。请参阅 www.rowweb.dk/skyline/ - 顺便说一下，我正在使用 Bootstrap。
I have the following block of code so far:
到目前为止，我有以下代码块：
$(window).scroll(function () {
winHeight = $(window).height();
if ($(window).scrollTop() > winHeight) {
$('.navbar').css('position', 'fixed');
$('.navbar').css('top', '0');
}
});
Does anyone have a solution to my problem?
有没有人能解决我的问题？
回答by Zim
Take a look at the Bootstrap Affix plugin: http://getbootstrap.com/javascript/#affix
看看 Bootstrap Affix 插件：http: //getbootstrap.com/javascript/#affix
Here's a working example: http://bootply.com/97918
这是一个工作示例：http: //bootply.com/97918
Related
Sticky NavBar onScroll?
回答by daveyfaherty
A. Wolff is right.
答：沃尔夫是对的。
'#mainContent' is inside .navbar, and so they are both fixed to the top, and overlay the .jumbotron element, as well as not being scrollable.
'#mainContent' 位于 .navbar 内，因此它们都固定在顶部，并覆盖 .jumbotron 元素，并且不可滚动。
Move it outside .navbar and you should be ok.
将它移到 .navbar 之外，你应该没问题。
回答by Barlas Apaydin
Apply this for solid working without plugin.
将此应用于没有插件的可靠工作。
$(document).ready(function() {
var windowH = $(window).height();
var stickToBot = windowH - $('#menu').outerHeight(true);
//outherHeight(true) will calculate with borders, paddings and margins.
$('#menu').css({'top': stickToBot + 'px'});
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
if ( scrollVal > stickToBot ) {
$('#menu').css({'position':'fixed','top' :'0px'});
} else {
$('#menu').css({'position':'absolute','top': stickToBot +'px'});
}
});
});?
Source: How to build simple sticky navigation at the page bottum?
回答by Bhupinder Kumar
$(function() {
$（函数（）{
// grab the initial top offset of the navigation
var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;
// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
// if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
if (scroll_top > sticky_navigation_offset_top) {
$('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
} else {
$('#sticky_navigation').css({ 'position': 'relative' });
}
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
// NOT required:
// for this demo disable all links that point to "#"
$('a[href="#"]').click(function(event){
event.preventDefault();
});
});
});
回答by Anand
function FixedTopMenuOnScroll() {
var winHeight = $(".site-header").height();//any image,logo or header above menu
winHeight = winHeight - $('.navbar').height();
function checkMenuOnTop() {
if ($(window).scrollTop() > winHeight) {
$('.navbar').addClass("navbar-fixed-top");
}
else {
$('.navbar').removeClass("navbar-fixed-top");
}
}
checkMenuOnTop();
$(window).scroll(function () {
checkMenuOnTop();
});
}
FixedTopMenuOnScroll();
