jquery - 通过从某个点向下滚动来滚动网站标题

Question

我希望我的网站标题:

i.) 当用户的滚动位置在顶部时保持固定在顶部(比方说:在顶部 300px，或者理想情况下直到滚动还没有到达下一个向下的元素)

ii.) 当向下滚动到达某个点时，标题将变为绝对定位，在页面进一步向下滚动时产生“向上滚动”的效果。

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

<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/

Answer 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 上，滚动处理程序在滚动事件完成时触发。