将子部分从一个部分滚动到另一个部分

Question

我有 3 个部分（第一、第二和第三），在“第一”部分中我还有另一个部分，称为“contenidor_composicio”。 我想做的是使“contenidor_composicio”成为滚动部分。所以我想像“固定”一样移动它，但总是从一个部分移动到另一个部分，只需一个简单的鼠标滚动（我放了 50px）。 例如，如果我在“第一”部分，我不想向下滚动到“第二”。我想直接从一号到二号。

<section id="first">
    <section id="contenidor_composicio"></section>
</section>
<section id="second"></section>
<section id="third"></section>

在示例中查看：http://jsfiddle.net/blackersoul/LATDj/

谢谢

Answer 1

我相信这应该可以实现您想要的。

首先，更新您的 CSS，使 contenidor_composicio 的位置是相对的。

#contenidor_composicio {
    background-color: black;
    height: 400px;
    width: 70%;
    margin: auto;
    position:relative;
}

现在，我们需要修复 jQuery/JavaScript...

首先，我们需要添加一个标志来确定滚动是由用户移动滚动条还是由脚本更改滚动位置引起的。然后，在您检查滚动差异是否大于 minPx 值的条件下，添加我们的新标志必须为 false。

接下来，我们需要更改条件。我们不是检查 currentScroll 位置是否等于 firstPosition，而是检查 previousScroll 位置是否相等。

接下来，让我们将 $(window).scrollTop(position) 移出动画序列。我不确定它们是否返回一个值，所以让我们滚动然后动画。

现在我们已经将它的位置设置为相对位置，将我们正在制作动画的 css 属性更改为 top 而不是 marginTop。

我们还需要在 CSS 属性的值上加上“px”。

好的，设置新的滚动位置和动画现在应该可以正常工作了。让我们将 currentScroll 设置为我们刚刚滚动到的新位置。

然后将 jumped 标志设置为 true，因为脚本导致滚动，而不是用户。

清洗、冲洗、重复每个条件。

现在，我们将在差异和跳转测试中添加一条 else 语句以将标志设置为 false，以便为下一次滚动（只能由用户执行）做好准备。

最后，我们要将previousScroll = currentScroll 的设置移动到条件中。这将其修复为如果我们从三个位置之一滚动超过 minPx，它会触发滚动脚本。否则，如果我们一次缓慢地向下滚动页面少于 mixPx，我们将永远不会触发滚动脚本。

$(function () {


    /**********************     REDIMENCIÓ DE LES SECCIONS FIRST & SECOND & THIRD    *************************/

    var alcada = $(window).height();
    alcada = parseInt(alcada, 10);
    $('#first').height(alcada);
    $('#second').height(alcada);
    $('#third').height(alcada);

    /*********************************** SCROLLING to a SECTION *************************/
    var $scrollingDiv = $("#contenidor_composicio");

    /* Get the position of each Section */
    var previousScroll = 0;
    var firstPosition = $('#first').offset().top;
    var secondPosition = $('#second').offset().top;
    var thirdPosition = $('#third').offset().top;

    var minPx = 50; /***** Min px to move to next/previous step *********/

    var jumped = false; //indicates whether scrolling was due to user or to scrip

    $(window).scroll(function () {
        var currentScroll = $(this).scrollTop();
        var difference = Math.abs(currentScroll - previousScroll);
        if ((difference >= minPx) && !jumped) {
            if (currentScroll > previousScroll && previousScroll == firstPosition) /******** 1rst step  */
            {
                //            alert('down 1-->2');
                $(window).scrollTop(secondPosition);
                $scrollingDiv.stop()
                    .animate({
                    "top": (secondPosition + "px")
                }, "slow");
                currentScroll = secondPosition;
                jumped = true; //script caused scrolling
            } else if (currentScroll > previousScroll && previousScroll == secondPosition) /*********** 2nd Step *******/
            {
                //            alert('down 2-->3');
                $(window).scrollTop(thirdPosition);
                $scrollingDiv.stop()
                    .animate({
                    "top": (thirdPosition + "px")
                }, "slow");
                currentScroll = thirdPosition;
                jumped = true; //script caused scrolling
            } else if (currentScroll < previousScroll && previousScroll == secondPosition) /*********** 2nd Step *******/
            {
                //               alert('go from  2-->1');
                $(window).scrollTop(firstPosition);
                $scrollingDiv.stop()
                    .animate({
                    "top": (firstPosition + "px")
                }, "slow");
                currentScroll = firstPosition;
                jumped = true; //script caused scrolling
            } else {
                //               alert('down 3-->2');
                $(window).scrollTop(secondPosition);
                $scrollingDiv.stop()
                    .animate({
                    "top": (secondPosition + "px")
                }, "slow");
                currentScroll = secondPosition;
                jumped = true; //script caused scrolling
            }
            previousScroll = currentScroll;
        } else {
            jumped = false; 
        }
    });
});