滚动后更改导航栏颜色? [英] Changing nav-bar color after scrolling?

问题描述

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

How can I set the navbar with no background color?

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

When scrolling down after a div the nav-bar gets a new background-color (the nav-bar should be fixed at top, I use navbar-fixed-top in Bootstrap)

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

I've tried some tutorials but I didn't succeed.

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

This is the website : http://attafothman.olympe.in/
I'm talking about that black nav-bar on top.

推荐答案

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

Here is simplest way how to change navbar color after window scroll:

在头部添加follow JS:

Add follow JS to 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;
}

当滚动超过导航栏高度时，固定导航栏的背景颜色将变为白色.

Background color of fixed navbar will be change to white when scroll exceeds height of navbar.

参见JsFiddle

这篇关于滚动后更改导航栏颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！