滚动后更改导航栏颜色？

Question

如何设置没有背景颜色的导航栏？

在div之后向下滚动时,导航栏会获得一个新的背景颜色(导航栏应该固定在顶部,我navbar-fixed-top在Bootstrap中使用)

我尝试了一些教程,但没有成功.

这是网站:http://attafothman.olympe.in/
我在谈论顶部的黑色导航栏.

Answer 1

这是在窗口滚动后如何更改导航栏颜色的最简单方法:

添加关注JS到头:

$(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

Answer 2

这是一个jsfiddle的例子.使用Jquery根据滚动像素位置更改背景颜色.

这是一个使用bootstrap的小提琴

$(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');
       }
   });
    }
});

Answer 3

这是一个简单的纯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");
    }
};

确定你必须有2个班级

.nav-colored { background-color:#000; }
.nav-transparent { background-color:transparent;}

Answer 4

我认为这个解决方案比旧的答案更短更简单。这是 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;
}

Answer 5

今天我遇到了同样的问题，如何将导航栏背景颜色更改为滚动。我正在寻找一个只使用 CSS、没有 jquery、没有引导程序或 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>

Answer 6

<script>
    $(document).ready(function(){
      $(window).scroll(function() { // check if scroll event happened
        if ($(document).scrollTop() > 50) { // check if user scrolled more than 50 from top of the browser window
          $(".navbar-fixed-top").css("background-color", "#f8f8f8"); // if yes, then change the color of class "navbar-fixed-top" to white (#f8f8f8)
        } else {
          $(".navbar-fixed-top").css("background-color", "transparent"); // if not, change it back to transparent
        }
      });
    });
</script>

Answer 7

Intersection Observer API怎么样？这避免了使用滚动事件可能导致的缓慢。

超文本标记语言

<nav class="navbar-fixed-top">Navbar</nav>
<main>
  <div class="content">Some content</div>
</main>

CSS

.navbar-fixed-top--scrolled更改导航栏背景颜色。当我们向下滚动时内容 div 不再 100% 可见时，它会添加到导航栏。

.navbar-fixed-top {
  position: sticky;
  top: 0;
  height: 60px;
}

.navbar-fixed-top--scrolled {
  /* change background-color to whatever you want */
  background-color: grey;
}

JS

创建观察者以确定内容 div 何时与浏览器视口完全相交。

回调函数的调用方式为：

• 第一次最初要求观察者观察目标元素
• 当内容 div 不再完全可见时（由于阈值：1）
• 当内容 div 变得完全可见时（由于阈值：1）

isIntersecting指示内容 div（目标元素）是否与观察者的根（默认情况下浏览器视口）完全相交。

// callback function to be run whenever threshold is crossed in one direction or the other
const callback = (entries, observer) => {
  const entry = entries[0];
  
  // toggle class depending on if content div intersects with viewport
  const navBar = document.querySelector('.navbar-fixed-top');
  navBar.classList.toggle('navbar-fixed-top--scrolled', !entry.isIntersecting);
}

// options controls circumstances under which the observer's callback is invoked
const options = {
  // no root provided - by default browser viewport used to check target visibility
  // only detect if target element is fully visible or not
  threshold: [1]
};

const io = new IntersectionObserver(callback, options);

// observe content div 
const target = document.querySelector('.content');
io.observe(target);

IntersectionObserver 选项

当前，当内容 div 开始移出屏幕时，导航栏会更改背景颜色。

如果我们希望背景在用户滚动时立即更改，我们可以使用rootMargin属性（上、右、下、左）并将上边距设置为导航栏高度的负数（在我们的例子中为 60px）。

const options = {
  rootMargin: "-60px 0px 0px 0px",
  threshold: [1]
};

您可以在CodePen上看到上述所有操作。Kevin Powell 对此也有很好的解释（Github和YouTube）。

Answer 8

这可以使用jQuery完成。

这是小提琴的链接。

当窗口滚动时，将比较窗口顶部和窗口高度之间的距离。如果if语句为true，则背景色设置为透明。当您滚动回到顶部时，颜色会恢复为白色。

$(document).ready(function(){
    $(window).scroll(function(){
        if($(window).scrollTop() > $(window).height()){
            $(".menu").css({"background-color":"transparent"});   
        }
        else{
            $(".menu").css({"background-color":"white"});
        }

    })
})

Answer 9

window.addEventListener('scroll', function (e) {
        var nav = document.getElementById('nav');
        if (document.documentElement.scrollTop || document.body.scrollTop > window.innerHeight) {
                nav.classList.add('nav-colored');
                nav.classList.remove('nav-transparent');
            } else {
                nav.classList.add('nav-transparent');
                nav.classList.remove('nav-colored');
            }
    });

使用事件侦听器的最佳方法。特别是对于 Firefox 浏览器，请查看此文档Scroll-linked effects并且 Firefox 不再支持document.body.scrollTop和替代使用document.documentElement.scrollTop. 这完成了Yahya Essam的回答

Answer 10

与上述答案略有不同，但使用 Vanilla JS：

var nav = document.querySelector('nav'); // Identify target

window.addEventListener('scroll', function(event) { // To listen for event
    event.preventDefault();

    if (window.scrollY <= 150) { // Just an example
        nav.style.backgroundColor = '#000'; // or default color
    } else {
        nav.style.backgroundColor = 'transparent';
    }
});