Question

我的标题在滚动时从颜色变化。但是当我刷新页面时，它会回到第一种颜色。如何在不影响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函数

2 个答案: