Javascript 使引导导航栏在滚动上折叠?
当我在常规桌面版本上滚动过引导导航栏时,我试图使它在非折叠状态和移动/折叠状态之间切换 我曾尝试使用jQuery,但这迫使我编写css更改,一旦scrollTop>number of pixels,就会在jQuery中逐行崩溃 即使我做了上述操作,不幸的是,即使移动导航栏会出现,菜单选项也会一直存在,并且不会在单击汉堡时关闭 我忍不住想肯定有一种更简单的方法可以做到这一点,但我对Bootstrap非常陌生 提前谢谢 编辑,以下是我尝试过的代码: 此CSS是导致导航栏在高级点切换到移动版本的原因,我希望它:Javascript 使引导导航栏在滚动上折叠?,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,当我在常规桌面版本上滚动过引导导航栏时,我试图使它在非折叠状态和移动/折叠状态之间切换 我曾尝试使用jQuery,但这迫使我编写css更改,一旦scrollTop>number of pixels,就会在jQuery中逐行崩溃 即使我做了上述操作,不幸的是,即使移动导航栏会出现,菜单选项也会一直存在,并且不会在单击汉堡时关闭 我忍不住想肯定有一种更简单的方法可以做到这一点,但我对Bootstrap非常陌生 提前谢谢 编辑,以下是我尝试过的代码: 此CSS是导致导航栏在高级点切换到移动版本的原因,
@media (max-width: 1150px){
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
.navbar-static-top {
position: fixed;
top: 0;
left: 0;
width: 100%;
margin: 0;
}
下面是我用来在滚动超过50像素后尝试将css应用于桌面标题的快速代码:
$(document).ready(function(){
var $document = $(document);
$document.scroll(function() {
if ($document.scrollTop() >= 50) {
/*$('.navbar-header').css('float', 'none');
$('.navbar-toggle').css('display', 'block');
$('.navbar-collapse').css('border-top', '1px solid transparent');
$('.navbar-collapse').css('box-shadow', 'inset 0 1px 0 rgba(255,255,255,0.1)');
$('.navbar-collapse.collapse').css('display', 'none !important');
$('.navbar-nav').css('float', 'none !important');
$('.navbar-nav').css('margin', '7.5px -15px');
$('.navbar-nav>li').css('float', 'none');
$('.navbar-nav>li>a').css('padding-top', '10px');
$('.navbar-nav>li>a').css('padding-bottom', '10px');
$('.navbar-text').css('float', 'none');
$('.navbar-text').css('margin', '15px 0');
$('.navbar-collapse.collapse.in').css('display', 'block !important');
$('.collapsing').css('overflow', 'hidden!important');
$('.navbar-static-top').css('position', 'fixed');
$('.navbar-static-top').css('top', '0');
$('.navbar-static-top').css('left', '0');
$('.navbar-static-top').css('width', '100%');
$('.navbar-static-top').css('margin', '0');*/
} else {
}
});
});
我也在努力让汉堡按钮显示在卷轴上。看起来你很接近了,但是你可以更容易地完成下面的工作 在common内的main.js中,在滚动条上添加一个类:
$(".navbar").on('affixed.bs.affix', function(){
$('.navbar').addClass('navbar-collapsed');
});
当导航返回顶部时移除该类:
$(".navbar").on('affixed-top.bs.affix', function(){
$('.navbar').removeClass('navbar-collapsed');
});
然后为该类添加SAS:
.navbar-collapsed{
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
.navbar-static-top {
position: fixed;
top: 0;
left: 0;
width: 100%;
margin: 0;
}
}
你能展示你尝试过的代码吗?现在在代码中编辑。好的,你最不想做的事情是在jQuery中编写所有CSS,这不是它的目的,所以我甚至不想在更少的行中讨论如何做到这一点。编写CSS时,当navbar有另一个类名时,即它折叠并使用$'navbar'。addClass'navbar-collapsed'和$'navbar'。removeClass'navbar-collapsed'如果您确实发现自己需要在jQuery中编写一些CSS,最好在一个调用中完成,例如$'.navbar static top'。CSS{'position':'fixed','top':'0};等等,但是@popleak是正确的:不要在jQuery.Right中编写所有CSS。我现在让导航栏在滚动点之后贴在页面顶部,但仍在努力让它切换到移动版本。有什么想法吗,伙计们?