javascript - 使用 jQuery 移动到网站的各个部分 `.scroll()`

Question

我试图在 jQuery 中创建一个简单的效果，当用户向下滚动页面时，“ Pane ”会自动动画进入 View (这样用户就不必自己一直向下滚动)。

这很难解释，所以这里是例子: http://jsfiddle.net/naxb22q3/1/

如您所见，当您向下滚动经过蓝色 Pane 几个像素时，会显示绿色 Pane 。但是，我当前拥有的代码使得一旦显示绿色 Pane ，您就无法再向上或向下滚动。您必须重新加载页面才能使其再次工作。

理想情况下，用户可以向上或向下滚动并且动画可以工作。

HTML:

<div class="pane bgBlue"></div>
<div class="pane bgGreen"></div>
<div class="pane bgRed"></div>

CSS:

.pane {
    height: 1000px;
    width: 100%;
}
.bgBlue {
    background-color: blue;
}
.bgGreen {
    background-color: green;
}
.bgRed {
    background-color: red;
}

JavaScript:

/**
 * Lock scroll position for each pane
 * as the user scrolls down.
 */
$.fn.scrollView = function () {
    return this.each(function () {
        $('html, body').animate({
            scrollTop: $(this).offset().top
        }, 1250);
    });
}


// Variables
var windowHeight = $(window).height();
var headerHeight = $('.siteHeader').outerHeight();
var paneHeight = windowHeight - (headerHeight / 2);


// `.scroll()` function
$(window).scroll(function () {
    height = $(window).scrollTop();

    if (height > 5) {
        $('.pane.bgGreen').scrollView();

        //$(this).off('scroll');
    }


    // After we scroll past the green pane,
    // the red pane is shown (via the same animation)
    if (height > (paneHeight * 2)) {
        $('.pane.bgRed').scrollView();
    }
});

Answer 1

粗略的解决方案，但一个开始 - http://jsfiddle.net/bkseqsu4/

Javascript:

// Variables
var windowHeight = $(window).height();
var headerHeight = $('.siteHeader').outerHeight();
var paneHeight = windowHeight - (headerHeight / 2);
var scrollLock = 0;
var paneIndex = 0;
var lastScroll = 0;
var panes = ['.pane.bgBlue', '.pane.bgGreen', '.pane.bgRed'];

/**
 * Lock scroll position for each pane
 * as the user scrolls down.
 */
$.fn.scrollView = function() {
  this.each(function() {
    $('html, body').animate({
      scrollTop: $(this).offset().top
    }, 1000, "swing", function() {
      setTimeout(function() {
        scrollLock = 0;
        var currentPosition = $(this).scrollTop();
        lastScroll = currentPosition;
      }, 100);

    });

  });
}

// `.scroll()` function
$(window).scroll(function() {

  if (scrollLock == 0) {
    var currentPosition = $(this).scrollTop();
    if (currentPosition > lastScroll) {
      paneIndex = paneIndex + 1;
    } else {
      paneIndex = paneIndex - 1;
    }

    scrollLock = 1;
    $(panes[paneIndex]).scrollView();
  }

});