Question

我有一个小脚本，允许我的标题在滚动页面时追加并删除子类。

然而，过渡很难，我希望标题变体从一个变为另一个。

我无法弄清楚如何让它消失。它要么闪烁，要么闪烁然后消失。我想知道是否有人可以帮助我。

我的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类，然后淡入。

反之亦然。

我希望我的问题有道理。

Answer 1

如果在完成淡入淡出功能时添加或删除，则：

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

变为：

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

或者你可以在css中使用附加类的动画变换

Answer 2

我能够弄明白，但这已经产生了一个新的问题，将在稍后发布。以下是我的解决方案：

$(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);
            }
        }
    });
});

在附加课程后，有标题淡出

2 个答案: