jquery - 从某个位置向下滚动来滚动网站标题

我希望我的网站标题为：

i。）保持固定在顶部，而用户的滚动位置位于顶部（比方说：顶部300像素，或者理想情况下，直到滚动尚未到达下一个元素为止）

ii。）并且在向下滚动时到达某个点时，页眉将更改为绝对位置，从而在页面进一步向下滚动时产生“向上滚动”效果。

我已经使用以下代码对此进行了处理，但是当我在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/

最佳答案

以下内容仅适用于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上，滚动事件结束时会触发滚动处理程序。

关于jquery - 从某个位置向下滚动来滚动网站标题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25406373/