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。

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

接下来，让我们将$（窗口）.scrollTop（位置）移出动画序列。我不确定它们会返回一个值，所以让我们滚动然后动画。

现在我们已将其css属性更改为top而不是marginTop，因为我们已将其位置设为相对位置。

我们还需要将“px”添加到CSS属性的值。

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

然后将跳转标志设置为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; 
        }
    });
});

将子节从一个节滚动到另一节

1 个答案: