Как я могу анимировать панель навигации, возвращающуюся к началу веб-сайта?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Прямо сейчас я успешно анимировал панель навигации при прокрутке страницы вниз. Однако, когда я возвращаюсь к началу, он немедленно сбрасывается, поэтому веб-сайт работает не так гладко, как хотелось бы. Кто-нибудь может мне помочь с этим, используя Javascript? Вот что у меня есть на данный момент:

JavaScript

 $(function () {
  $(document).scroll(function () {
      var $nav = $(".topnav");
      $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
    });
  $(document).scroll(function () {
      var $nav = $(".topnav");
      $nav.toggleClass('unscrolled', $(this).scrollTop() == $nav.height());
    });
});
 

CSS

     .topnav.scrolled {
        background-color: #000000;
        transition: background-color 200ms linear;
    }
    .topnav.unscrolled {
        background-color: transparent;
        transition: background-color 200ms linear;
    }
 

Раздел «развернутый» не работает, поэтому вы можете игнорировать его.

Ответ №1:

Не видя определения ваших классов CSS, мне интересно, добавляется ли ‘unscrolled’ вместе с ‘scrolled’, вызывая конфликт.

Можем ли мы увидеть, где вы объявляете оба .scrolled и .unscrolled ?

В то же время, не зная ничего другого, я бы попробовал так:

 $(function () {
  $(document).scroll(function () {
      var $nav = $(".topnav");
      $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height()); // add class 'scrolled' when doc.scrollTop > nav.height, remove when not
      $nav.toggleClass('unscrolled', $(this).scrollTop() <= $nav.height()); // add scroll 'unscrolled' when doc.scrollTop <= nav.height, remove when hot
    });
});
 

Комментарии:

1. Я только что обновил свой вопрос! Спасибо, что помогли мне.

2. Unscrolled по-прежнему не работает. Может ли это быть мой css?

Ответ №2:

Обычно я использую jQuery, и заголовок у меня фиксированный в css, а затем это добавляет класс при прокрутке, когда пользователь прокручивает половину страницы, поэтому он не меняется мгновенно при прокрутке.

  $(window).scroll(function() {

    var $topNav = $(".topnav"),
        $scroll = $(window).scrollTop(),
        $wh = window.innerHeight / 2;

    if ($scroll > $wh) {
        $topNav.addClass("scrolled");
    } else {
        $topNav.removeClass("scrolled");
    }

});
 

Вы можете изменить $ wh на все, что захотите, число или пиксели сверху и т. Д…

Комментарии:

1. Будет ли это реанимироваться до исходного цвета topnav при прокрутке назад к началу? Если нет, то как я могу это сделать?

2. Да, вам не нужно добавлять 2 класса, просто создайте .topnav так, как он должен выглядеть, а затем style .scroll так, как вы хотите, чтобы он выглядел при добавлении класса. Стиль перехода должен быть только в .topnav, а не в теге .scroll . Вы хотите, чтобы topnav всегда анимировался, поэтому не удаляйте и не пытайтесь добавить его снова.