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

我认为，当向下或向上滚动时，当没有任何部分处于窗口顶部位置的完美位置时，只需滚动到最接近窗口顶部位置的最近部分。如果是，只需滚动到您所在的部分上方或下方的部分。看一下这个How to find the closest element to the current position with jQuery

Answer 2

好的，我想我已经明白了。

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;

        }

     });

});

jQuery从元素滚动到元素到元素和页面滚动因子

2 个答案: