我使用一个称为custom.css的辅助文件夹来覆盖引导代码,我想知道如何创建一个代码,只有当我的网站的访问者不在页面顶部时激活.
直到现在,我使用引导提供的默认代码创建了一个透明导航栏.我唯一需要做的是设置它执行：background-color：#color当访问者滚动下来.
当我在页面的顶部,导航栏是透明的,但当我向下滚动它变得不透明.
解决方法
好的,你需要以下代码来实现这个效果：(我将使用jQuery,因为它是引导支持的语言).
jQuery的：
/**
* Listen to scroll to change header opacity class
*/
function checkScroll(){
var startY = $('.navbar').height() * 2; //The point where the navbar changes in px
if($(window).scrollTop() > startY){
$('.navbar').addClass("scrolled");
}else{
$('.navbar').removeClass("scrolled");
}
}
if($('.navbar').length > 0){
$(window).on("scroll load resize",function(){
checkScroll();
});
}
您也可以使用ScrollSpy来执行此操作.
和你的CSS(示例)：
//Add the below transitions to allow a smooth color change similar to lyft
.navbar {
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}
.navbar.scrolled {
background: rgb(68,68,68); //IE
background: rgba(0,0.78); //NON-IE
}
