CODEWITHSUNDEEP
javascriptjqueryanimationscroll
Keenan Payne
Keenan Payne

Reputation: 816

Moving to sections of a website using jQuery `.scroll()`

I am trying to create a simple effect in jQuery that when the user scrolls down the page, a "pane" is automatically animated into view (so that the user doesn't have to scroll down all of the way themselves).

It's hard to explain, so here is the example: http://jsfiddle.net/naxb22q3/1/

As you can see, when you scroll down past the blue pane a few pixels, the green pane is shown. However, the code that I currently have makes it so that once that green pane is shown, you can no longer scroll up or down. You have to reload the page to get it to work again.

Ideally, the user could scroll up or down and the animations would work.

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

Upvotes: 0

Views: 128

Answers (1)

cmmcninch
cmmcninch

Reputation: 26

Rough solution, but a start - 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();
  }

});

Upvotes: 1

Related Questions