Question

我一直在寻找JSFiddle答案中找到的this question。我的问题是类似的，除了我想要在页面上向下滚动的div应该垂直居中在窗口的左侧，而不是在左上角。我尝试对JQuery进行修改：

    $.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',
                top: 50%
            });
        }
    });

但是当我设置顶部：在其他地方50％时，滚动不会停在指定的位置，而是一直沿着页面向下移动。这是我的全部修改后的JSFiddle。

如何正确修改它以便我可以将元素固定在垂直中间位置，但在某个点之后停止？

Answer 1

第一个问题是您需要将50%放在引号中，运行时出错。第二个问题是，当您点击pos标记后将其设置为2000时，它会跳出视图，因此您需要获取窗口高度并将其设置为pos + windowHeight/2。这是您更新的代码

var windw = this;

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

    $window.scroll(function(e){
        if ($window.scrollTop() > pos) {
            $this.css({
                position: 'absolute',
                top: pos + ($(window).height() / 2)
            });
        } else {
            $this.css({
                position: 'fixed',
                top: '50%'
            });
        }
    });
    };

    $('#f').followTo(2000);

和您更新的小提琴http://jsfiddle.net/Tgm6Y/11649/

使用div垂直高度的50％停止固定位置滚动？

1 个答案: