当它到达页面顶部时,我想在滚动时将静态导航栏设置为固定导航栏。
有没有办法使用 bootstrap 3 css 或 javascript 获取它?
最佳答案
如果我没记错的话,您要实现的目标就是 Sticky navbar。
通过几行 jQuery 和滚动事件很容易实现:
$(document).ready(function() {
var menu = $('.menu');
var content = $('.content');
var origOffsetY = menu.offset().top;
function scroll() {
if ($(window).scrollTop() >= origOffsetY) {
menu.addClass('sticky');
content.addClass('menu-padding');
} else {
menu.removeClass('sticky');
content.removeClass('menu-padding');
}
}
$(document).scroll();
});
我已经为您做了一个快速工作示例,希望对您有所帮助: http://jsfiddle.net/yeco/4EcFf/
要使其与 Bootstrap 一起工作,您只需添加或删除“navbar-fixed-top”而不是 jsfiddle 中的“sticky”类。
关于javascript - 如何引导导航栏静态固定在滚动条上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21301316/