滾動孩子部分從一個部分到另一個

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; 
     } 
    }); 
});