滚动时的jQuery Navbar过渡。 如何调整特定的过渡点

Question

在我正在建立的网站中，我试图使导航栏在滚动时更改颜色。 但是，我不希望它在开始滚动时就更改颜色。 我想要在指定的位置（一旦我滚动通过超大屏幕）。

到目前为止，我只能通过从顶部滚动来使其工作。 我不够熟练，无法弄清楚页面上特定点后的处理方法。 我将非常感谢对此的一些指导。

jQuery脚本

 $(function () {
  $(document).scroll(function () {
    var $nav = $(".fixed-top");
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
  });
});

感谢您的帮助或指导！

Answer 1

有很多方法可以做到。
一种方法可以用纯JavaScript完成。
根据您的需要更改代表滚动条值的changeColorValue 。

这是我的建议： 现场演示

JavaScript的：

var changeColorValue = 50;
window.addEventListener("scroll", scrollAnim);
function scrollAnim () {
  var val = getScrollVal();

  if(val > changeColorValue)
  {
    document.getElementById('mynav').style.backgroundColor = 'red';
  }
  else
  {
    document.getElementById('mynav').style.backgroundColor = '#333';
  }
}
function getScrollVal()
{
  var val = $(document).scrollTop();
  return val;
}