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?

after

var curScrollTop = $scrollDiv.scrollTop();

check what value it gets, console.log

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.