在某一点停止固定位置滚动？

Question

我有一个位置的元素:固定,因此滚动页面我不知道如何.当用户向上滚动时,我希望元素在某一点停止滚动,比如当它距离页面顶部250px时,这可能吗？任何帮助或建议都会有所帮助,谢谢!

我有一种感觉,我需要使用jquery这样做.我尝试获取用户所在位置的滚动或位置,但真的很困惑,是否有任何jquery解决方案？

Answer 1

你的意思是这样吗？

http://jsfiddle.net/b43hj/

$(window).scroll(function(){
    $("#theFixed").css("top", Math.max(0, 250 - $(this).scrollTop()));
});

$(window).scroll(function(){
    $("#theFixed").css("top", Math.max(0, 100 - $(this).scrollTop()));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="theFixed" style="position:fixed;top:100px;background-color:red">SOMETHING</div>

<!-- random filler to allow for scrolling -->
STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>

Answer 2

这是我刚刚编写的一个快速jQuery插件,它可以满足您的需求:

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

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

$('#yourDiv').followTo(250);

见工作示例→

Answer 3

这是一个完整的jquery插件,可以解决这个问题:

https://github.com/bigspotteddog/ScrollToFixed

这个插件的描述如下:

此插件用于将元素固定到页面顶部,如果元素将垂直滚出视图; 但是,它确实允许元素继续向左或向右移动水平滚动.

给定选项marginTop,一旦垂直滚动到达目标位置,元素将停止垂直向上移动; 但是,当页面向左或向右滚动时,元素仍将水平移动.页面向下滚动到目标位置后,元素将恢复到页面上的原始位置.

此插件已在Firefox 3/4,Google Chrome 10/11,Safari 5和Internet Explorer 8/9中进行了测试.

用于您的特定情况:

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>

$(document).ready(function() {
    $('#mydiv').scrollToFixed({ marginTop: 250 });
});

Answer 4

一个可能的CSS ONLY解决方案可以通过position: sticky;

浏览器支持实际上非常好：https : //caniuse.com/#search=position%3A%20sticky

这是一个例子：https : //jsfiddle.net/0vcoa43L/7/

Answer 5

你可以在他的回答中做James Montagne用他的代码做的事情,但这会使它在Chrome中闪烁(在V19中测试).

你可以解决这个问题,如果你把"margin-top"而不是"top".真的不知道为什么它适用于margin.

$(window).scroll(function(){
    $("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});

http://jsbin.com/idacel