I'm trying to create something like http://deathtrap.co/ - where when you scroll you automatically go to the top of the next or previous div
$(window).bind('scroll', function () {
$('html, body').animate({scrollTop:$('#scroll-over').position().top}, 'slow');
});
This works to scroll to the next div but then you can't scroll back up. I just have the two sections I want to scroll between.
<div id = "banner">
content
</div>
<div id ="scroll-over">
content
</div>
Do the follwoing in jQuery:
Firstly you set the current div to 1 because the website starts at the top. Then you can see that I implemented a function which indicates whether the user scrolls up or down. If he scrolls down you set the current div to 2. And jQuery will scroll down to that div. Remember that you have to give the right ID's.
var currentDiv = 1;
var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
$('html, body').bind(mousewheelevt, function(e){
var evt = window.event || e //equalize event object
evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible
var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF
if(delta > 0) {
//scroll up
currentDiv = 1;
$('html, body').animate({
scrollTop: $("#"+currentDiv).offset().top
}, 500);
}
else{
//scroll down
currentDiv = 2;
$('html, body').animate({
scrollTop: $("#"+currentDiv).offset().top
}, 500);
}
});
Lets say your html looks like this:
<div id = "1">
content
</div>
<div id ="2">
content
</div>
If you give them a height of 100% you can scroll between them. I will ad an live example later.
