Question

我正在努力实现应该是一项简单的任务。

页面加载
用户可以自由地向下滚动不同的部分。
当特定DIV到达页面中心时，我想暂停/阻止向下滚动，直到DIV水平移动到左侧固定数量的像素。
然后可以允许用户继续向下滚动页面。

此外，如果用户向上滚动，我希望达到相反的效果，即在继续运行之前将div向右滚动固定数量的像素。

以下是我的代码示例。

$(window).scroll(function() {
    sD = $(this).scrollTop();

    // $('.features-2-item').width();
    if (sD > (f2Pos.top + 100) && sD < f2Pos.top + 2000 + 100) {

        // if scroll distance is greater than the top position of
        // the statements when they are centred in the viewport,
        // and less than the top position of statements centred 
        // plus the height of 4 statements, prevent user from 
        // scrolling, then run function to change statements.
        sD = f2Pos.top + 100;
        var scroll = $(window).scrollTop();
        // console.log(('up or down: ' + xSlide + ' > - ' + statementWidth + ' || ' + scroll + ' < ' + position));
        if (xSlide > -statementWidth || scroll < position) {
            slideStatements();
        }
    }

    if (sD > f2Pos.top + 2000) {
        // if scroll distance is greater than the top positon of
        // the statements, centred in the viewport, plus the   
        // height of 4 statements, the user has scrolled through    
        // all of the statements and should be allowed to resume   
        // scrolling. Scrolling should be adjusted to take away  
        // the distance equal to the height of 4 statements.
        sD = sD - 2000 + 100;
    }

});

var statementWidth = $('.features-2-item').width();
var xSlide = statementWidth;

var position = $(window).scrollTop();


function slideStatements() {
    var st = $(this).scrollTop();
    if (st > lST) {
        // Going Down
        if (cS) {
            // disallow scrolling until after statement slides
            cS = false;
            xSlide = Math.floor(xSlide + 32);
            $(window).one('scroll.slideStatements', function() {

                $(".features-2-container").css("transform", "translateX(" + xSlide + "px)");
            });
            // allow scrolling after statement slides
            cS = true;

        }
    } else {
        // Going Up
        if (cS) {
            // disallow scrolling until after statement slides
            cS = false;

            xSlide = Math.floor(xSlide - 32);

            $(window).one('scroll.slideStatements', function() {
                // $sS.slick("slickPrev");
                $(".features-2-container").css("transform", "translateX(" + xSlide + "px)");
            });
            // allow scrolling after statement slides
            cS = true;

        }
    }
    lST = st - 1;
}

任何建议都会很棒。

问候

Answer 1

嗨，我不是这里的专家，但我想分享我的方法。

在我看来，最难的部分是如何防止滚动。所以我们不会阻止它，相反我们会利用它。

假设我们有3个部分，比如

<section>...</section>
<section class='stuart'>
  <div class='kevin'></div>
</section>
<section>...</section>

风格如

.stuart {
  height: 600px;
}

.kevin {
  position: absolute;
  width: 50px;
  height: 50px;
  background: tomato;
}

所以stuart是我们的容器，kevin是一个盒子。

我们的目标很简单，当kevin上升并通过窗口中间时，我们会将其保持在中间（垂直）并将其从左向右移动（水平）直到{{1}的末尾传递。

代码就像

stuart

重要的部分是始终与if (stuart.top < windowHeight / 2 && stuart.top + stuart.height - kevin.height > windowHeight / 2) { let distance = windowHeight / 2 - stuart.top kevin.classList.add('fixed') kevin.style.left = distance + 'px' }的位置相关的距离，因此您无需对相反的效果做任何事情。

最后的例子here。

坏消息，您需要自己计算容器的高度，或者固定位置可能不适用于您的情况或其他事情，但我希望这个想法会以某种方式帮助您。感谢。

当用户向上和向下滚动时，在页面上移动元素

1 个答案: