我想要做的是当你滚过它时导航栏停留在页面的顶部.由于我对JavaScript很陌生,我看了一些教程,但是,它们都没有真正使用Bootstrap导航栏.我只是想知道是否有办法这样做,以便它与Bootstrap列一起使用.
另外,我怎么能这样做,以便在滚动时,背景颜色开始淡入？
以下是导航栏的HTML代码,如果有帮助:
Alexander St.. 9
Bootstrap 3有一个类.navbar-fixed-top,可以应用于nav固定到页面顶部的元素.它适用于不同屏幕尺寸的所有基本导航栏功能.作为官方文档的一部分,有一个例子.
如果您需要它从屏幕顶部以一定量的px变粘,那么您需要将滚动事件处理程序附加到页面.然后,您将检查页面滚动的距离,然后应用固定的导航类或设置样式以固定到特定位置.像这样的东西:
$(document).ready(function() {
var $navbar = $("#mNavbar");
AdjustHeader(); // Incase the user loads the page from halfway down (or something);
$(window).scroll(function() {
AdjustHeader();
});
function AdjustHeader(){
if ($(window).scrollTop() > 60) {
if (!$navbar.hasClass("navbar-fixed-top")) {
$navbar.addClass("navbar-fixed-top");
}
} else {
$navbar.removeClass("navbar-fixed-top");
}
}
});body{
position: relative;
display: block;
height: 1000px;
overflow-y: scroll;
}
.navbar{
top: 60px;
}
我不确定你的意思是padding被添加到顶部和底部,但你可以通过.navbar-fixed-top在Bootstrap版本之后添加到样式表并更新填充值来覆盖CSS .可能存在top将导航栏从屏幕顶部移开的CSS值,您可以通过设置top来解决该问题0.
希望这有帮助!
Bootstrap 3有一个类.navbar-fixed-top,可以应用于nav固定到页面顶部的元素.它适用于不同屏幕尺寸的所有基本导航栏功能.作为官方文档的一部分,有一个例子.
如果您需要它从屏幕顶部以一定量的px变粘,那么您需要将滚动事件处理程序附加到页面.然后,您将检查页面滚动的距离,然后应用固定的导航类或设置样式以固定到特定位置.像这样的东西:
$(document).ready(function() {
var $navbar = $("#mNavbar");
AdjustHeader(); // Incase the user loads the page from halfway down (or something);
$(window).scroll(function() {
AdjustHeader();
});
function AdjustHeader(){
if ($(window).scrollTop() > 60) {
if (!$navbar.hasClass("navbar-fixed-top")) {
$navbar.addClass("navbar-fixed-top");
}
} else {
$navbar.removeClass("navbar-fixed-top");
}
}
});body{
position: relative;
display: block;
height: 1000px;
overflow-y: scroll;
}
.navbar{
top: 60px;
}
京公网安备 11010802040832号 | 京ICP备19059560号-6 