Creating a "polite" scroll snap in jQueary

Vote count:

0

I'm trying to build a "polite" scroll snap. You might be familiar with parallax scrolling which will sometimes locks panels into the window of the browser - this makes it feel you are fighting with the scroll bar. Apple's website used to use it. Here is a good example.

What I want to do is do some detection on the mouse movement - so if the mouse hasn't moved 3 seconds then the scroll will move the to correct location. I have found some short snippets of jQuery but I'm struggling to piece it together so that it works. As I'm trying to learn and this is a bit of a challenge I just need someone to set me off in the right direction...

The JSFiddle

var timeout = null;

$(window).on('mousemove', function() {

$(function(){
var _top = $(window).scrollTop();
var individualDivHeight = 300;

$(window).scroll(function() {
    var _cur_top = $(window).scrollTop();
    var totalHeight = $('#container').height();
    var posToScroll = Math.round(_cur_top / individualDivHeight) *    individualDivHeight;
}); 
});


if (timeout !== null) {
    clearTimeout(timeout);
}

timeout = setTimeout(function() {
    $('html, body').stop().animate({scrollTop: posToScroll}, 200);
}, 3000);
});

asked 2 mins ago

Dan Lee

75

Creating a "polite" scroll snap in jQueary