jQuery從元素滾動到元素到頁面滾動元素和因素

Question

我想要製作一個固定的導航，讓您在頁面上的元素之間滾動，並保持你在頁面上的位置。我見過幾個例子，我稍微修改了一些例子，但一直沒有能夠正常工作。當我在上一個/下一個按鈕之間切換時，我的最新嘗試可以正常工作，但是我想要考慮用戶在頁面上的位置。例如，如果我點擊下一個按鈕兩次，則計數設置爲2，並將我帶到頁面上的第二部分。然後，如果我點擊一次前一個按鈕，則計數設置爲1，並且將我帶到頁面上的第一部分。現在，如果我向頁面中間滾動（使用瀏覽器滾動條），然後點擊下一個按鈕，則計數設置爲3，並將其帶到頁面的第二部分。我需要它，以便它將我帶到頁面上的下一個可見部分。我需要一種方法來檢測用戶當前在哪個部分，並將其與我的邏輯相關聯，以便有人可以使用其滾動條或此固定導航在頁面中進行無縫導航。我怎樣才能做到這一點？

JS小提琴：http://jsfiddle.net/picitelli/fCLKm/

JS

function scrollTo(el) { 

    $('html,body').animate({ 
     scrollTop: $(el).offset().top 
    }, 500); 

} 

var scroller = $('.scroller'), 
    scrollNext = scroller.find('.next'), 
    scrollPrev = scroller.find('.prev'), 
    count = 0, 
    sectionCounter = $('.section').length; 

scrollNext.on("click", function() { 

    if (count < sectionCounter && count !== sectionCounter) { 
     count++; 
     scrollTo('.section:eq(' + count + ')'); 
    } else { 
     // do nothing 
    } 

    console.log(count); 

}); 

scrollPrev.on("click", function() { 

    if (count > 0) { 
     count--; 
     scrollTo('.section:eq(' + count + ')'); 
    } else { 
     // do nothing 
    } 

    console.log(count); 
}); 

HTML

<div class="scroller"> 
    <span class="prev">Previous</span> 
    <span class="next">Next</span> 
</div> 

<div class="content">Lorem ipsum some content...</div> 

<div class="section">A</div> 
<div class="section">B</div> 
<div class="section">C</div> 
<div class="section">D</div> 
<div class="section">E</div> 
<div class="section">F</div> 
<div class="section">G</div> 
<div class="section">H</div> 
<div class="section">I</div> 
<div class="section">J</div> 
<div class="section">K</div> 

CSS

.content { 
    padding: 20px; 
} 
.section { 
    background: #f2f2f2; 
    height: 400px; 
    padding: 20px; 
} 
.section:nth-child(even) { 
    background: #ccc; 
} 
.scroller { 
    position: fixed; 
    right: 20px; 
    top: 20px; 
} 
.scroller span { 
    background: #fff; 
    color: #666; 
    cursor: pointer; 
    display: block; 
    font-size: 14px; 
    padding: 5px; 
    text-align: center; 
    width: 50px; 
} 
.scroller span:hover { 
    color: #000; 
} 
.scroller span.prev { 
    margin-bottom: 2px; 
} 

任何反饋/方向將不勝感激。

Answer 1

好吧，我想我想通了。

JS小提琴：http://jsfiddle.net/picitelli/Tfbb3/

新的JS

function scrollTo(el) { 

    $('html,body').animate({ 
    scrollTop: $(el).offset().top 
    }, 500); 

} 

var scroller = $('.scroller'), 
    scrollPrev = scroller.find('.prev'), 
    scrollNext = scroller.find('.next'), 
    section = $('.section'), 
    position = -1; 

// add data count to each section 
section.each(function(index) { 

    $(this).attr('data-count', index); 

}); 

// next click through scrolling 
scrollNext.on('click', function() { 

    if (position < section.length - 1) { 

     position++; 

     scrollTo(section[position]); 

    } 

}); 

// prev click through scrolling 
scrollPrev.on('click', function() { 

    if (position > 0) { 

     position--; 

     scrollTo(section[position]); 

    } 

}); 

// page scroll position detection 
$(window).scroll(function() { 

    var currentPosition = $(this).scrollTop(); 

    section.each(function() { 

     var top = $(this).offset().top, 
      bottom = top + $(this).height(); 

     if(currentPosition >= top && currentPosition <= bottom) { 

      var sectionCount = $(this).attr('data-count'); 

      position = sectionCount; 

     } 

    }); 

}); 

Answer 2

我想不是保持一個計數，而是在沒有任何部分位於窗口頂部位置的完美位置時，滾動到最靠近窗口頂部位置的最近部分。如果是，請滾動到上面或下面的部分。看看這個How to find the closest element to the current position with jQuery