Блог

У меня есть небольшой скрипт, который позволяет моему заголовку добавлять и удалять подкласс при прокрутке страницы.

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

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

Код jquery, который у меня есть, приведен ниже (в нерабочем состоянии)

 function init() {
window.addEventListener('scroll', function(e){
    var distanceY = window.pageYOffset || document.documentElement.scrollTop,
        shrinkOn = 100,
        header = document.querySelector("#header");
    if (distanceY > shrinkOn) {
        $("header").addClass("smaller").fadeIn(400);
    } else {
        if ($("header").hasClass("smaller")) {
            $("header").fadeOut(400).removeClass("smaller").fadeIn(400);
     }
    }
});
}
window.onload = init();
  

Я хочу, чтобы заголовок исчез, добавьте класс .smaller, затем снова исчезните.

И наоборот.

Я надеюсь, что мой вопрос имеет смысл.

Если вы добавите или удалите по завершении функции fade, чтобы:

  $("header").addClass("smaller").fadeIn(400);
  

становится:

  $("header").fadeIn(400, function(){
   $(this).addClass("smaller");
 });
  

в качестве альтернативы вы можете использовать анимационные преобразования в css для добавленных классов

Я смог разобраться в этом, но это породило новый вопрос, который будет опубликован позже. Вот мое решение ниже:

 $(document).ready(function() {
    /*
        navOffset - The distance in which to trigger the events
        scrollPos - The position Y that the page has been scrolled
    */

  var navOffset = 5 /*$("header").offset().top;*/

    $(window).scroll(function(){
    var scrollPos = $(window).scrollTop();
    $("header").stop(true);

        if (!$("header").hasClass("smaller") || scrollPos < navOffset) {
            if (scrollPos > navOffset) {
                $("header").fadeTo(400, 0, function() {
                    $("header").addClass("smaller");
                });
                $("header").fadeTo(400, 1); 
            } else {
                $("header").fadeTo(400, 0, function (){
                    $("header").removeClass("smaller");
                });
                $("header").fadeTo(400, 1);
            }
        }
    });
});