淡入/缓和粘性标题答案

【问题标题】：Fade in / Ease down sticky header淡入/缓和粘性标题
【发布时间】：2013-12-07 01:46:56
【问题描述】：

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

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

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

这里是the URL in question，这里是用于sticky header的当前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);
    }

});

【问题讨论】：

您也可以尝试将transition:all 300ms ease; 添加到sticky CSS 类。它不会褪色，但效果很有趣。如果您添加了$('header').css('opacity', 0').addClass('sticky').css('opacity', 1);，它也可能会导致褪色。试试看 - 非常简单的添加:)
@Chris -- 不兼容跨浏览器...但可能是：stackoverflow.com/questions/11202963/… 我仍然认为使用 jQuery 会更好地处理所有情况并保持在所使用的框架内。在我看来，在活动类型中，缓动更像是 JS 而不是 CSS。
@digitalextremist 目的是尝试提供建议，而不是提供详细而正式的答案——否则，我会发布答案。我只是想把 CSS 放在桌面上，如果 OP 想探索那条路线，他们可以。至于 easing 是 javascript 的角色，我认为这并不重要，但我倾向于它是 CSS 的工作，它旨在处理表示格式。如果缓动是主要的 JS 活动，那么语言中就会内置一些东西，而不是依赖额外的库或编写数千行原版脚本。
无意不尊重@Chris。一般来说，CSS3 并不是为浏览器提供的，JS 注释对于每个工具在创造正在转变的美学中的作用是次要的。请不要将我的简短视为不同意，而是快速跟进您对 CSS 最新功能的正确手势。
@digitalextremist 无意冒犯——我们在限制字符的评论框中输入内容，没有真正的对话：p

标签： jquery css easing

【解决方案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');
    }
});

一方面会很快，但另一方面会优雅且感觉流畅。否则，漂亮的设计。

【讨论】：