如何设置没有背景颜色的导航栏？
在 div 之后向下滚动时，导航栏会获得新的背景颜色（导航栏应该固定在顶部，我navbar-fixed-top在 Bootstrap 中使用）
我尝试了一些教程，但没有成功。
这是网站：http : //attafothman.olympe.in/
我说的是顶部的黑色导航栏。
滚动后更改导航栏颜色？
IT技术
javascript
jquery
html
css
twitter-bootstrap
2021-02-03 17:43:18
6个回答
这是如何在窗口滚动后更改导航栏颜色的最简单方法：
添加follow JS到head：
$(function () {
$(document).scroll(function () {
var $nav = $(".navbar-fixed-top");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
和这个 CSS 代码
.navbar-fixed-top.scrolled {
background-color: #fff !important;
transition: background-color 200ms linear;
}
当滚动超过导航栏的高度时，固定导航栏的背景颜色将变为白色。
查看关注JsFiddle
这是一个jsfiddle 示例。使用 Jquery 根据滚动像素位置更改背景颜色。
$(document).ready(function(){
var scroll_start = 0;
var startchange = $('#startchange');
var offset = startchange.offset();
if (startchange.length){
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$(".navbar-default").css('background-color', '#f0f0f0');
} else {
$('.navbar-default').css('background-color', 'transparent');
}
});
}
});
这是一个简单的纯 javascript
var myNav = document.getElementById('mynav');
window.onscroll = function () {
"use strict";
if (document.body.scrollTop >= 200 ) {
myNav.classList.add("nav-colored");
myNav.classList.remove("nav-transparent");
}
else {
myNav.classList.add("nav-transparent");
myNav.classList.remove("nav-colored");
}
};
在某些 chrome 版本中存在以下错误：
document.body.scrollTop
所以你可以添加这样的条件：
if (document.body.scrollTop >= 200 || document.documentElement.scrollTop >= 200 )
确定你必须有 2 个class
.nav-colored { background-color:#000; }
.nav-transparent { background-color:transparent;}
我认为这个解决方案比旧的答案更短更简单。这是 Js 代码：
const navbar = document.querySelector('.nav-fixed');
window.onscroll = () => {
if (window.scrollY > 300) {
navbar.classList.add('nav-active');
} else {
navbar.classList.remove('nav-active');
}
};
还有我的 css：
header.nav-fixed {
width: 100%;
position: fixed;
transition: 0.3s ease-in-out;
}
.nav-active {
background-color:#fff;
box-shadow: 5px -1px 12px -5px grey;
}
今天我遇到了同样的问题，如何将导航栏背景颜色更改为滚动。我正在寻找一个只使用 CSS 的解决方案，没有 jquery，没有 bootstrap 或 javascript。但后来发现仅使用 CSS 还无法完成（截至今天 2019 年 12 月）。并且必须选择，我将坚持使用核心技术 - javascript 而不是 jquery 或 bootstrap，除非它使用 js 比其他人复杂得多。但幸运的是，事实并非如此。
这是代码：
- 它使用onscroll/ scrollevent ofwindow来触发事件侦听器。
- 在事件监听器中，使用pageYOffset/ scrollYofwindow来检查滚动状态。
两者之间的浏览器支持似乎相同：
- https://caniuse.com/#search=pageYOffset
- https://caniuse.com/#search=scrollY
var navbar = document.querySelector('nav')
window.onscroll = function() {
// pageYOffset or scrollY
if (window.pageYOffset > 0) {
navbar.classList.add('scrolled')
} else {
navbar.classList.remove('scrolled')
}
}body {
margin: 0;
padding: 0;
background: url(https://occ-0-325-395.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABaKr-dQAdVTt7fuGCgzntgBBrFce2DMW72dF86eO7EnXbFZvzmX2TPnQAg3HwAsvt7ZnDnP0nwuHOtPwpWGGOE22fXq2.webp?r=847) top/contain no-repeat;
}
nav {
position: -webkit-sticky;
position: sticky;
/* sticky or fixed are fine */
position: fixed;
top: 0;
height: 69px;
width: 100%;
background: linear-gradient(to bottom, #000, #0003 70%,#0000); /* background when scroll is in the top */
transition: background .5s; /* control how smooth the background changes */
}
nav.scrolled {
background: #0a0a0a;
}
main {
height: 200vh;
}<nav></nav>
<main></main>