我试图理解的效果在Start Bootstrap Grayscale Template中使用。
这是一个bootstrap 3.0实现。 向下滚动时,导航区域会快速但平滑地改变其颜色。 我想把这个很棒的功能带到yamm的超级菜单中。 http://geedmo.github.io/yamm/
但在我能做到之前,我必须理解整体观念。 有人可以对此有所了解吗?
处理导航区域的样式如下:
.navbar {
margin-bottom: 0;
border-bottom: 1px solid rgba(255,255,255,.3);
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
background-color: #000;
}
.navbar-brand {
font-weight: 700;
}
.navbar-brand:focus {
outline: 0;
}
.navbar-custom a {
color: #fff;
}
.navbar-custom .nav li a {
-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
}
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
outline: 0;
background-color: rgba(255,255,255,.2);
}
.navbar-toggle {
padding: 4px 6px;
font-size: 16px;
color: #fff;
}
.navbar-toggle:focus,
.navbar-toggle:active {
outline: 0;
}
@media(min-width:767px) {
.navbar {
padding: 20px 0;
border-bottom: 0;
letter-spacing: 1px;
background: 0 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
background-color: #000;
}
.navbar-custom.top-nav-collapse {
border-bottom: 1px solid rgba(255,255,255,.3);
}
}
我很想知道哪些部分对此影响负责。
答案 0 :(得分:4)
不一定是您要找的东西,但您可以尝试使用此fiddle之类的内容。如果您在向下滚动的同时查看控制台,您将看到顶部距离更改时的距离。您只需检查距离,然后只需更改菜单的类。
JS就像:
$(window).scroll(function(){
var posTop = $(window).scrollTop() - $('.container').offset().top
console.log('from .container: '+posTop+' | from top of page: '+$(window).scrollTop());
}).trigger('scroll');
编辑:您编辑了问题并使其更加具体,我的回答并不适用于您现在要求的内容。
稍后编辑:效果似乎是通过JavaScript完成的,正如我所建议的那样。如果你查看greyscale.js
,你可以找到:
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
位于文件的最顶部。基本上它表示每当用户滚动时,它会检查它是否比顶部低50px。如果有,则会将nav
的类更改为top-nav-collapse
。然而,平滑效果来自CSS。