我使用一个名为 custom.css 的辅助文件来覆盖 Bootstrap 代码,我想知道如何创建一个仅在我网站的访问者不在页面最顶部时才激活的代码。
到目前为止,我使用 bootstrap 提供的默认代码创建了一个透明的导航栏。我唯一需要做的就是将其设置为在访问者向下滚动时执行:background-color: #color
。
当我在页面顶部时,导航栏是透明的,但当我向下滚动时,它变得不透明。
最佳答案
好的,您需要以下代码来实现此效果:(我将使用 jQuery,因为它是 bootstrap 支持的语言)。
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, 0, 0.78); /* NON-IE */
}
关于css - 在滚动时设置 Bootstrap 导航栏透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29646622/