通过从某个点向下滚动来滚动网站标题答案

【问题标题】：Rolling up the website header with the scrolling from a certain point down通过从某个点向下滚动来滚动网站标题
【发布时间】：2014-08-20 13:44:43
【问题描述】：

我希望我的网站标题：

i.) 当用户的滚动位置在顶部时（假设：在顶部 300 像素，或者理想情况下直到滚动没有到达下一个元素），保持固定在顶部

我已经使用以下代码进行了此操作，但是当我在我的 ipad 上测试它时，它非常慢，标题在做出反应之前有几秒钟的延迟。 是否有更好的做法，也许是更有效的方法来实现这种效果？

<div class="header">
</div>
<div class="scrollarea1">
</div>
<div class="scrollarea2">
</div>


.header {
    background: #282828;
    position: fixed;
    height: 100px;
    width: 100%;
}
.scrollarea1 {
    background: #EFEFEF;
    height: 300px;
    width: 100%;
}
.scrollarea2 {
    background: #C0C0C0;
    height: 1700px;
    width: 100%;
}


$(document).ready(function () {
var elementStyle=document.getElementsByClassName("header").item(0).style;
        $(window).scroll(function(){             
                if( $(window).scrollTop() >= 300 ) {
                        elementStyle.position = "absolute";
                        elementStyle.marginTop = "300px";
                } else {
                        elementStyle.position = "fixed";
                        elementStyle.marginTop = "0px";
                }
        });
});

JsFiddle 链接：http://jsfiddle.net/79ugd4x9/15/

【问题讨论】：

不要使用 iPad :p
或者不要使用网站只是在纸上打印东西..你也有一个可行的解决方案吗？？？
您是否在其他手持设备上测试过它？它可能特定于 iOS 设备上的 Safari。这里没有足够的信息来提供帮助。
这有助于我在 DOM 繁忙时在所有设备上实现更好的滚动性能：imakewebthings.com/jquery-waypoints

标签： jquery css header web vertical-scrolling

【解决方案1】：

以下内容仅适用于 iOS 设备，不适用于大多数桌面浏览器。如果您需要支持其他浏览器，则应保留滚动事件处理程序。

您可以尝试使用position: sticky 和touchmove 事件。我也在使用pageYOffset 而不是scrollTop()，因为在iOS 上scrollTop() 在滚动事件完成之前不会更新。

var elementStyle = document.getElementsByClassName("header").item(0).style;
$(window).on('touchstart touchmove touchend', function () {
    if (window.pageYOffset >= 300) {
        elementStyle.position = "fixed";
        elementStyle['-webkit-transform'] = "translate3D(0px," + -(window.pageYOffset - 300) + "px,0px)";
    } else {
        elementStyle.position = "sticky";
        elementStyle['-webkit-transform'] = "translate3D(0px,0px,0px)";
    }
})

动画：

.header {
    ...
    -webkit-transition: all 500ms linear;
    transition: all 500ms linear
}

您可能需要考虑使用translate3D 而不是更改margin-top，因为它可以进行硬件加速。动画应该可以工作，但我只能在刷新率有限的模拟器中进行测试，因此无法确认。

JSFiddle Edit

编辑：要使用惯性滚动，请在触摸事件和滚动事件中调用处理程序。在 iOS 上，滚动处理程序在滚动事件完成时被触发。

【讨论】：