在它停止的位置停止div,然后定位固定

时间:2013-01-25 11:47:26

标签: jquery scroll

我正在使用以下内容将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

可以这样做吗?

3 个答案:

答案 0 :(得分:2)

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

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

});

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

朋友抱歉我没有看到确切的,但这可能会解决你的目的:)。

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