滚动时固定元素？

Question

因此，我有一个div，它试图在滚动时使距页面顶部到页面点之间的距离保持100px。 目前，我的代码可以正常工作，但div距顶部的距离不完全是100px，而是在0px-200px之间改变

这是我正在使用的atm：

$(window).scroll(function(){
var tpxl = $(window).scrollTop();
if( tpxl<100) {
$('#div').css('top',-Math.abs(tpxl)+100 + 'px');
}
else if(tpxl>700) {
$('#div').css('top',-Math.abs(tpxl)+800 + 'px');
}
});

Answer 1

您不需要Math.abs()因为tpxl将始终为正数。 要将div的位置设置为距窗口当前顶部100px，请使用$(window).scrollTop() + 100 + 'px' 。

我不太了解为什么要使用if / else if结构。 以下内容将使div始终固定为100px：

$(window).scroll(function () {
    $('#div').css('top', $(window).scrollTop() + 100 + 'px');
}).scroll();

演示： http ： //jsfiddle.net/G5BVU/

要仅在滚动点小于100或大于700（例如原始代码）时将位置设置为“固定”，请尝试以下操作：

$(window).scroll(function () {
    var tpxl = $(window).scrollTop();
    if (tpxl < 100 || tpxl > 700) {
        $('#div').css('top', tpxl + 100 + 'px');
    }
}).scroll();

演示： http ： //jsfiddle.net/G5BVU/1/

编辑：要使元素正常滚动，除非在这两个点之间滚动窗口时，只需反转前面示例中的if条件即可：

if (tpxl > 100 && tpxl < 700)
    $('#div').css('top', tpxl + 100 + 'px');

http://jsfiddle.net/G5BVU/2/

在所有情况下，请提供适当的初始top设置。