Прозрачная для цвета панель навигации при прокрутке не переключается на цвет при перезагрузке страницы

#javascript #html #jquery #css #responsiveness

#javascript #HTML #jquery #css #отзывчивость

Вопрос:

Этот код переключается между прозрачной и белой панелью навигации в зависимости от того, как далеко прокручивается страница. Однако, если я перезагружаю страницу во время ее прокрутки до точки, где панель навигации должна быть белой, она снова становится прозрачной после перезагрузки, пока я не начну прокрутку (тогда она становится белой). Как я могу сделать ее белой перед прокруткой, если страница перезагружена?

 $(window).scroll(function () {
    if ($(this).scrollTop() > 50) {
        $("nav").addClass("scrolled");
    } else {
        $("nav").removeClass("scrolled");
    };
});

Ответ №1:

     $(document).ready(function(){


      if ($(window).scrollTop() > 50){
        $("nav").addClass("scrolled");
      }else{
        $("nav").removeClass("scrolled");
      };
    
  
});

попробуйте это и дайте отзыв

Ответ №2:

Отредактировано на основе комментария, чтобы проверить прокрутку при загрузке и соответствующим образом установить стили.

 function toggleScroll(){  
  if ($(window).scrollTop() > 50) {
    $("nav").addClass("scrolled");
  } else {
    $("nav").removeClass("scrolled");
  };
}

$(window).scroll(function() {
    toggleScroll();
    $( "nav" ).text( $(this).scrollTop() );
});

$(function() {
    toggleScroll();
    $( "nav" ).text( "Loaded with scroll: "   $(this).scrollTop() );
});

 .container {
  height: 2000px;
  background-color: gray;
}

nav {
  position: fixed;
  top: 20px;
  left: 20px;
  height: 150px;
  width: 150px;
  padding: 40px;
  background-color: transparent;
}

.scrolled {
  background-color: white;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <nav id="nav">
      Nav
    </nav>
</div>

1. Это делает противоположное тому, что я хочу, чтобы это делало. Я хочу, чтобы она была прозрачной в начале и становилась белой только после прокрутки вниз.

2. Отредактировано, чтобы отменить действие и проверить положение прокрутки при загрузке.

3. Мне приходит в голову, что если ваш браузер восстанавливает положение прокрутки, то проверка прокрутки при загрузке может сработать до того, как положение прокрутки будет восстановлено браузером, что объясняет, почему стиль установлен не так, как вы ожидаете. В этом случае вам нужно будет выполнить запрос history.scrollRestoration и учесть это, либо установив для него значение manual , самостоятельно прокрутив страницу до верха, либо запустив проверку прокрутки после того, как она завершит восстановление предыдущей позиции прокрутки.

4. Только что протестировал это с использованием автономного HTML-документа, который работает в Safari, и мой комментарий выше re: history.scrollRestoration , похоже, не соответствует действительности. Мой опубликованный пример работает.