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

element-positionを「fixed」に変更したときに条件を調整しました。私にとっては今は機能します：

$(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();
});