Добавление класса в прокрутку и сохранение поведения после обновления страницы

Question

У меня есть отлично функционирующий элемент, который ведет себя так, как должен. Когда пользователь прокручивается мимо определенной точки, добавляется класс. Когда пользователь выполняет прокрутку, класс удаляется. Моя проблема заключается в том, что после добавления класса, когда я обновляю страницу, класс больше не добавляется до тех пор, пока я не перейду еще раз.

Это прерывистый случай. Firefox является основным браузером, который постоянно создает проблему. Chrome включен и выключен.

Я включил очень упрощенный фрагмент кода, однако его нелегко увидеть, так как он нуждается в обновлении. Я искал весь день и смотрел на файлы cookie, локальное хранилище, classie.js. Я уверен, что есть более простое и простое решение, чем те.

Вот такой сайт с аналогичной проблемой: https://bert.house/en/. Проверьте его в Firefox. Кнопка nav в левом верхнем углу страницы, прокрутите вниз и посмотрите, что произойдет. Затем обновите, вы увидите, что оно возвращается в исходное состояние, пока вы не прокрутите его снова.

$(window).scroll(function() { 
 
    var box = $('.box'); 
 
    var scroll = $(window).scrollTop(); 
 
    if (scroll > 100) { 
 
     box.removeClass('box-NotScrolled'); 
 
     box.addClass('boxScrolled'); 
 
    } else { 
 
     if (box.hasClass('boxScrolled')) { 
 
     box.removeClass('boxScrolled'); 
 
     box.addClass('box-NotScrolled'); 
 
     } 
 
    } 
 
    });

.box { 
 
    position: fixed; 
 
    top: 5%; 
 
    left: 5%; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: red; 
 
} 
 
.boxScrolled { 
 
    background-color: green; 
 
} 
 
.box-NotScrolled { 
 
    background-color: red; 
 
}

<div class="box"></div> 
 
<div style="height: 1000px"></div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Это не является серьезной проблемой. Это то, что меня беспокоит, ведь там должна быть работа. Любая помощь будет большой. Благодарю.

Answer 1

Это будет работать при загрузке скрипта и при прокрутке или изменении размера. Это будет по существу проверять вас при загрузке страницы.

//Create classOnScroll function 
 
function classOnScroll(){ 
 
    let $box = $('.box'), 
 
     $scroll = $(window).scrollTop(); 
 
    
 
    if($scroll > 100){ 
 
    if(!$box.hasClass('boxScrolled')) 
 
     $box.addClass('boxScrolled'); 
 
    } 
 
    else 
 
    $box.removeClass('boxScrolled'); 
 

 
} 
 

 
//Run on first site run 
 
classOnScroll(); 
 

 
//Run on scroll and resize 
 
$(window).on('scroll resize',classOnScroll);

.box { 
 
    position: fixed; 
 
    top: 5%; 
 
    left: 5%; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: red; 
 
} 
 

 
.boxScrolled { 
 
    background-color: green; 
 
}

<div class="box"></div> 
 
<div style="height: 1000px"></div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

«Я искал весь день и смотрел на печенье, локальное хранилище, classie.js. Я уверен, что есть более простой, более простое решение, чем.»

Нет, это то, что вы будете использовать. CSS и HTML не могут «помнить» что угодно. Вы можете установить элемент localStorage, когда пользователь прокручивается, а затем на загрузку страницы проверяет этот элемент, и, если он существует, добавьте класс через JS.

И так localStorage не работает в изолированной среде для сообщений на SO, вот codepen - http://codepen.io/anon/pen/ZLmgPw

$(function() { 
 
    var box = $('.box'); 
 
    function setScrolled() { 
 
    box.removeClass('box-NotScrolled'); 
 
    box.addClass('boxScrolled'); 
 
    localStorage.setItem('scrolled',true); 
 
    } 
 
    function removeScrolled() { 
 
    if (box.hasClass('boxScrolled')) { 
 
     box.removeClass('boxScrolled'); 
 
     box.addClass('box-NotScrolled'); 
 
    } 
 
    } 
 
    if (localStorage.getItem('scrolled')) { 
 
    setScrolled(); 
 
    } 
 
    $(window).scroll(function() { 
 
    var scroll = $(window).scrollTop(); 
 
    if (scroll > 100) { 
 
     setScrolled(); 
 
    } else { 
 
     removeScrolled(); 
 
    } 
 
    }); 
 
})

.box { 
 
    position: fixed; 
 
    top: 5%; 
 
    left: 5%; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: red; 
 
} 
 
.boxScrolled { 
 
    background-color: green; 
 
} 
 
.box-NotScrolled { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"></div> 
 
<div style="height: 1000px"></div>