jquery - 在应该停止的地方做一个 div 停止，然后定位固定

Question

我正在使用以下内容将 div 修复到页面的几乎顶部，但是，当页面滚动时，我想在它到达顶部之前将其停止 60px。

目前它一直到顶部，然后又跳回 60px，这很混乱！

function moveScroller() {
        var move = function() {
            var st = $(window).scrollTop();
            var ot = $("#scroller-anchor").offset().top;
            var s = $("#scroller");
            if(st > ot) {
                s.css({
                    position: "fixed",
                    top: "60px"
                });
            } else {
                if(st <= ot) {
                    s.css({
                        position: "relative",
                        top: ""
                    });
                }
            }
        };
        $(window).scroll(move);
        move();
    }

    $(function() {
        moveScroller();
    });

这是一个小提琴：JSFiddle

这可以做到吗？

Answer 1

当您将元素位置更改为“固定”时，我调整了条件。对我来说它现在有效：

$(document).ready(function() {

    function moveScroller() {
        var move = function() {
            var st = $(window).scrollTop();
            var ot = $("#scroller-anchor").offset().top;
            var s = $("#scroller");
            var marginTop = 60;

            if((st+marginTop) > ot) {
                s.css({
                    position: "fixed",
                    top: marginTop + "px"
                });
            } else {
                if(st <= ot) {
                    s.css({
                        position: "relative",
                        top: ""
                    });
                }
            }
        };
        $(window).scroll(move);
        move();
    }

    $(function() {
        moveScroller();
    });

});

Answer 2

希望这可以满足您的要求。

function moveScroller() {
    var st = $(window).scrollTop();
    var ot = $("#scroller-anchor").offset().top;
    var s = $("#scroller");
    if (st > ot) {
        s.css({
            position : "fixed",
            top : "60px"
        });
    } else {
        if (st <= ot) {
            s.css({
                position : "relative",
                top : ""
            });
        }
    }
}


 $(window).scroll(moveScroller);
    $(function() {
       moveScroller();
  });

Answer 3

朋友抱歉，我没有看到确切的内容，但这可能会解决您的目的:)。

function moveScroller() {
var st = $(window).scrollTop();
var ot = $("#scroller-anchor").offset().top;
var s = $("#scroller");
if (st >= 200) {

    s.css({
        position : "fixed",
        top : "60px"
    });
} else {
    if (st <= ot) {
        s.css({
            position : "relative",
            top : ""
        });
    }
}

}

$(window).scroll(moveScroller);
$(function() {
moveScroller();
});