Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery window scroll event does not fire up

I'm trying to implement a simple "stay inside the viewport" behaviour to a div via jquery. For that i need to bind a function to the scroll event of the window, but i can't seem to get it to fire up: nothing happens. I've tried a simple alert(), console.log() no dice. An idea what i'm doing wrong?

This code :

$(window).scroll(function () {               console.log("scrolling");            }); 

sits in script.js, located at the very bottom of my html file

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script src="js/script.js"></script> </body> </html> 

UPDATE Test URL: http://pixeline.eu/test/menu.php

like image 755
pixeline Avatar asked Apr 16 '11 12:04

pixeline


2 Answers

Your CSS is actually setting the rest of the document to not show overflow therefore the document itself isn't scrolling. The easiest fix for this is bind the event to the thing that is scrolling, which in your case is div#page.

So its easy as changing:

$(document).scroll(function() {  // OR  $(window).scroll(function() {     didScroll = true; }); 

to

$('div#page').scroll(function() {     didScroll = true; }); 
like image 196
Charlie Sheather Avatar answered Oct 04 '22 12:10

Charlie Sheather


My issue was I had this code in my css

html, body {     height: 100%;     width: 100%;     overflow: auto; } 

Once I removed it, the scroll event on window fired again

like image 25
digitalzoomstudio Avatar answered Oct 04 '22 13:10

digitalzoomstudio