I have been working on a new website that scrolls 100% height/width panels one at a time. The panels are under a fixed header, and are wrapped with <div id="container></div>
I am, however, having some trouble implementing the javascript.
Once setup, the page should issue allerts with each mouse scroll in the Chrome console. (F12 - console). Yet, it doesn't output anything.
Here is the Jquery Code:
var prevScrollTop = 0;
var $scrollDiv = jQuery('div#container');
var $currentDiv = $scrollDiv.children('div:first-child');
$scrollDiv.scroll(function(eventObj)
{
var curScrollTop = $scrollDiv.scrollTop();
if (prevScrollTop < curScrollTop)
{
// Scrolling down:
$currentDiv = $currentDiv.next().scrollTo();
console.log("down");
}
else if (prevScrollTop > curScrollTop)
{
// Scrolling up:
$currentDiv = $currentDiv.prev().scrollTo();
console.log("up");
}
prevScrollTop = curScrollTop;
});
The format of the panels goes something like this
<div id="container">
<div id="wrapper-section-linux">
LINUX POSTS
</div>
<div id="wrapper-section-tech">
TECH POSTS
</div>
<div id="wrapper-section-news">
LIFE/NEWS/MISC
</div>
<div class="wrapper-section">
PHOTOS/VIDEOS
</div>
</div>
Any ideas?