固定 div 停止在某个点 jQuery

Question

我希望我的固定 div 在我的网页上的某个点停止滚动，但是，我发现的所有解决方案都没有真正正常运行并完成我想要的......

这是我当前的 jQuery：

var windw = this;
$.fn.followTo = function ( pos ) {
    var $this = this, $window = $(windw);

    $window.scroll(function(e){
        if ($window.scrollTop() > pos) {
            $this.css({
                position: 'absolute',
                top: pos
            });
        } else {
            $this.css({
                position: 'fixed',
                bottom: -10px
            });
        }
    });
};

$('#qF').followTo(800);

这是我的 HTML：

<div id="qF" class="central theater-dir-adown">
    <img src="data/img/prefs/dir_adown" class="dir-adown">
</div>

这是我的 CSS：

.theater-dir-adown{
    cursor: pointer;
    display: inline-block;
    position: fixed;
    bottom: -10px;
    left: calc(100% / 2 - 51px);
    width: calc(75% / 9);
    height: auto;
}

.dir-adown{
    width: 100%;
}

所以我想要 div #qF 在 800 像素处停止滚动，但我使用的代码不起作用，并且 div 将继续向下滚动页面。我不确定我的代码中是否存在某种错误，但有人可以帮助我吗？对 jQuery 来说还是很新的..

谢谢

Answer 1

将位置设置为固定时添加 top:'auto'

var windw = this;
$.fn.followTo = function ( pos ) {
    var $this = this, $window = $(windw);

    $window.scroll(function(e){
        if ($window.scrollTop() > pos) {
            $this.css({
                position: 'absolute',
                top: pos
            });
        } else {
            $this.css({
                position: 'fixed',
                bottom: -10,
                top:'auto'
            });
        }
    });
};

$('#qF').followTo(800);

你可以添加 top: pos + $(window).height() 从底部开始滚动

http://jsbin.com/fuzutaxiha/1/edit?html,css,js,output