Basically what I'm trying to do is use a on scroll event and use jquery scrollTop() while using this [off-canvas menu][1]

Here's a fiddle! /

Here's the code that isn't working as expected: (The scroll event never fires and scrollTop() always returns as 0)

$( window ).on('scroll', function() {
  console.log($(window).scrollTop());
  console.log('scrolling!');
});

My understanding is that because the off-canvas menu uses a relatively positioned wrapper div, the scroll event never fires because $(window).scrollTop() always returns zero.

How can I make a scroll event work and use scrollTop() ?

Basically what I'm trying to do is use a on scroll event and use jquery scrollTop() while using this [off-canvas menu][1]

Here's a fiddle! http://jsfiddle/k6hsvp1a/

Here's the code that isn't working as expected: (The scroll event never fires and scrollTop() always returns as 0)

$( window ).on('scroll', function() {
  console.log($(window).scrollTop());
  console.log('scrolling!');
});

My understanding is that because the off-canvas menu uses a relatively positioned wrapper div, the scroll event never fires because $(window).scrollTop() always returns zero.

How can I make a scroll event work and use scrollTop() ?

• javascript
• jquery
• html
• css
• twitter-bootstrap

• create a fiddle please – Jonas Grumann Commented Oct 20, 2014 at 15:39
• scroll what? scrollTop of what? Question is far too vague. Where's your code attempt that isn't working? – charlietfl Commented Oct 20, 2014 at 15:49
• Sorry guys, I added a fiddle and some clarification! – Chava Sobreyra Commented Oct 20, 2014 at 16:14

2 Answers 2

Debugging time... this is a little heavy handed, but worked in this scenario:

$("*").on('scroll', function() {
  console.log($(this));
});

The "*" applies to all elements.

Checked out the console:

[div.st-content, context: div.st-content, jquery: "1.9.1", constructor: function, init: function, selector: ""…]

So our scroll event is being triggered by .st-content

$(".st-content").on('scroll', function() {
  console.log($(this).scrollTop());
  console.log("scrolling");
});

Your fiddle is fiddling with the wrong container. Check my update here:

http://jsfiddle/k6hsvp1a/1/

This is the difference:

$( '.st-content' ).on('scroll', function() {
  console.log($('.st-content').scrollTop());
  console.log('scrolling!');
});

Every block element can scroll independently if its contents are larger than its dimensions and set to overflow: scroll (or overflow: auto (or overflow-y or... you get the point)).

The scroll event then fires on the actual div that's scrolling, and doesn't bubble up to the window. (https://developer.mozilla/en-US/docs/Web/Events/scroll)

What's also confusing is that this div in particular also happens to take up the whole window, so it looks like it's the window that's scrolling.