Question

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

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

jQuery脚本

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

感谢您的帮助或指导！

Answer 1

有很多方法可以实现。
一种方法可以使用纯javascript完成。
根据需要更改代表滚动条值的changeColorValue。

这是我的建议： LIVE DEMO

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;
}

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

1 个答案: