刷新后如何重新加载 onscroll 函数

Question

我的 header 改变了卷轴上的颜色。但是当我刷新页面时，它又回到了它的第一种颜色。如何在不影响 de jQuery?

的情况下刷新页面

jQuery

/*jslint browser: true*/
/*global $, jQuery, alert*/

$(document).ready(function() {
  "use strict";
  $(window).scroll(function() {
    var start_scroll = 0,
      start_change = $('#change-it-now'),
      offset = start_change.offset();

    if (start_change.length) {
      $(document).scroll(function() {
        start_scroll = $(this).scrollTop();

        if (start_scroll > offset.top) {
          $('nav').css('background-color', '#646464');
        } else {
          $('nav').css('background-color', '  #2b2b2b');
        }
      });
    }
  });
});

https://jsfiddle.net/x9ncbtw0/

Answer 1

您可以将颜色存储在 localStorage、

当您更改 nav bg 时，将其存储在 localStorage 中。
在页面加载时，检查 localStorage 中是否存储了颜色，如果是，则更新它。

类似于：

var lastBg = localStorage.getItem('color');
if (lastBg) {
  $('nav').css('background', lastBg);
}

$(document).scroll(function() {
  if ($(document).scrollTop() > 500) {
    localStorage.setItem('color', 'red');
    $('nav').css('background', 'red');
  }
});

http://output.jsbin.com/fimiceg/3

Answer 2

好吧，Chrome 会在刷新时记住您的滚动位置，因此最好在函数内设置颜色并在滚动时调用该函数。然后，您可以在页面加载时调用相同的函数，使用当前的 scrollTop，它应该设置正确的颜色。

像这样：

var start_change;

$(document).ready(function() {
  "use strict";

  $(window).scroll(function() {
    start_change = $('#change-it-now');
    $(document).scroll(function() {
        if (start_change.length) {
            checkScroll($(this).scrollTop());
        }
    });
  });

  checkScroll($(document).scrollTop());

});

function checkScroll(start_scroll) {
    var start_scroll = 0,
      offset = start_change.offset();
    if (start_scroll > offset.top) {
      $('nav').css('background-color', '#646464');
    } else {
      $('nav').css('background-color', '  #2b2b2b');
    }
}

刷新后如何重新加载 onscroll 函数

how can I reload an onscroll function after refresh

jquery

page-refresh

onscroll