как я могу перезагрузить функцию прокрутки после обновления - PullRequest
0 голосов
/ 29 мая 2018

мой заголовок меняется с цвета на свитке.Но когда я обновляю страницу, она возвращается к своему первому цвету.Как я могу обновить страницу, не влияя на 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/

Ответы [ 2 ]

0 голосов
/ 29 мая 2018

Что ж, 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');
    }
}
0 голосов
/ 29 мая 2018

Вы можете сохранить цвет в localStorage,

  1. . При изменении nav bg сохраните его в localStorage.
  2. . При загрузке страницы проверьте,цвет хранится в 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

...