jQuery - 在滚动时更改背景颜色

问题描述

我正在尝试在滚动时更改导航栏的 background-color（当前设置为 transparent）。我尝试了很多不同的东西，但它不起作用。请帮帮我。

这是我当前的代码

$(window).ready(function() {
 $(window).scroll(function() {
   var scroll = $(window).scrollTop();
    if (scroll > 300) {
     $(".navbar").css("background","blue");
    } else {
     $(".navbar").css("background","transparent");
    }
  })
})

ps。我不认为这可能是原因，但我已经用 Foundation 建立了网站。但是，我已经使用常规 SCSS 设置了 background: transparent。

解决方法

你必须添加一个类并调用它，检查下面的例子

var navbar = document.querySelector('nav')
  window.onscroll = function() {

  // pageYOffset or scrollY
  if (window.pageYOffset > 100) {
    navbar.classList.add('scrolled')
  } else {
    navbar.classList.remove('scrolled')
  }
}

 nav {
        position: -webkit-sticky;
        position: sticky;
        position: fixed;
        top: 0;
        height: 80px;
        width: 100%;
        background: #ffa5001f;
      }

      nav.scrolled {
        background: orange;
      }

      main {
        height: 200vh;
      }

   <nav></nav>
<main></main>

,

试试这个：

 $('.navbar').attr('style','background: blue!important');