Javascript 根据用户在页面上的位置更改jQuery

我正在尝试在用户向下滚动后背景出现的地方进行导航。然而，当用户在页面的中间，刷新时，背景消失，他们需要再次滚动，以便重新出现。我试图让它，每当用户已经滚动过去的标题，导航背景颜色将有无论什么

任何帮助都将不胜感激

代码：

Jquery：

    $(document).ready(function(){
  var targetOffset = $('header').offset().top + $('header').height();

  var $w = $(window).scroll(function(){
      if ( $w.scrollTop() > targetOffset ) {
          $("#nav").css('background-color', 'rgba(35,46,63,1)');
      } else {
        $('#nav').css('background-color', 'rgba(35,46,63,0)');
      }
  });
});

CSS:

HTML:

您可以试试这个

$( document ).load(function(){ /* your code */ });

你可以试试这个

$( document ).load(function(){ /* your code */ });

这是因为

$（window）.scroll（）只有在出现滚动时才会激活。同样的脚本需要在
$（document.ready（）
上执行。所以您可以创建一个函数，并在窗口调整大小和文档准备就绪时调用它

$(document).ready(function(){
  function changeBG() {
    var targetOffset = $('header').offset().top + $('header').height();

    if ( $w.scrollTop() > targetOffset ) {
      $("#nav").css('background-color', 'rgba(35,46,63,1)');
    } else {
      $('#nav').css('background-color', 'rgba(35,46,63,0)');
    }
  }

  changeBG();

  $(window).scroll(changeBG);

});

这是因为
$（window）.scroll（）只有在出现滚动时才会激活。同样的脚本需要在
$（document.ready（）
上执行。所以您可以创建一个函数，并在窗口调整大小和文档准备就绪时调用它

$(document).ready(function(){
  function changeBG() {
    var targetOffset = $('header').offset().top + $('header').height();

    if ( $w.scrollTop() > targetOffset ) {
      $("#nav").css('background-color', 'rgba(35,46,63,1)');
    } else {
      $('#nav').css('background-color', 'rgba(35,46,63,0)');
    }
  }

  changeBG();

  $(window).scroll(changeBG);

});

你试过使用waypoints.js吗？在滚动的固定标题上有很多例子，你看过吗？是的，我看过一些。我找不到任何有助于解决用户刷新和必须滚动才能重新显示的问题。你尝试过使用waypoints.js吗？在滚动的固定标题上有很多例子，你看过吗？是的，我看过一些。我找不到任何有助于解决用户刷新和必须滚动才能重新显示的问题。您不需要创建额外的匿名函数。只是：$（window）.scroll（changeBG）我有点像jquerynoob，我需要用这个替换我的全部代码吗？或者我需要把它放在某个特定的地方吗？我提供的jQuery代码将替换您提供的jQuery代码。它与脚本完全相同，但现在在页面准备就绪和滚动时调用它。我将其放入函数的唯一原因是，您不必重复同一代码两次。@WizardCoder:您可能需要再次编辑：
$（窗口）。滚动（changeBG）
正确传递对
changeBG
函数的引用。@HuguesMoreau谢谢。这是有道理的。您不需要创建额外的匿名函数。只是：$（window）.scroll（changeBG）我有点像jquerynoob，我需要用这个替换我的全部代码吗？或者我需要把它放在某个特定的地方吗？我提供的jQuery代码将替换您提供的jQuery代码。它与脚本完全相同，但现在在页面准备就绪和滚动时调用它。我将其放入函数的唯一原因是，您不必重复同一代码两次。@WizardCoder:您可能需要再次编辑：
$（窗口）。滚动（changeBG）
正确传递对
changeBG
函数的引用。@HuguesMoreau谢谢。这是有道理的。