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

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属性更改为顶部而不是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; 
     } 
    }); 
});