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() ?
Share Improve this question edited Oct 20, 2014 at 16:46 Chava Sobreyra asked Oct 20, 2014 at 15:31 Chava SobreyraChava Sobreyra 8611 gold badge9 silver badges21 bronze badges 3- 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
Reset to default 7Debugging 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.