Question

我的一个客户正在使用一个粘贴的标题，它在滚动一定距离后启动。

他们现在希望标题淡入并向下滑动到位，而不是像现在一样“出现”。

jQuery不是我的强项，所以任何帮助都会很棒。

这是the URL in question，这里是用于粘贴标题的当前jQuery;

$(window).scroll(function() {

    var headerheight = $("header").height();
    var header = $(document).scrollTop();

    if (header > height-75 ) {
        $('header').addClass('sticky');
        $('body').css("padding-top", headerheight);
        $('.sticky').css('top', 0);
    } else {
        $('header').removeClass('sticky');
        $('body').css("padding-top", 0);
        $('header').css('top', 25);
    }

});

Answer 1

如果以下修复不仅仅是下降，那么这个概念将解决您的问题以及需要“缓解”的未来实例。我们将消失该元素并使其重新出现。

具体来说，在addClass('sticky')之前执行：$('header').hide()并且在你完成所有美学魔术之后，执行$('header').fadeIn('fast') ...然后对你的回滚案例不应该做。

<强>示例：

$(window).scroll(function() {
    var headerheight = $("header").height();
    var header = $(document).scrollTop();

    if (header > height-75 ) {
        $('header').hide();
        $('header').addClass('sticky');
        $('body').css("padding-top", headerheight);
        $('.sticky').css('top', 0);
        $('header').fadeIn('fast');
    } else {
        $('header').fadeOut('fast');
        $('header').removeClass('sticky');
        $('body').css("padding-top", 0);
        $('header').css('top', 25);
        $('header').fadeIn('fast');
    }
});

一方面，这将是快速的，但另一方面，优雅和感觉流畅。否则，外观设计很棒。

淡入/淡化粘性标题

1 个答案: