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
$('#div').scroll(function () {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight-1) {
//fire your event
}
}
In my case you should put the function in $(document).ready
$(document).ready(function () {
$('div#page').on('scroll', function () {
...
});
});
Nothing seemd to work for me, but this did the trick
$(parent.window.document).scroll(function() {
alert("bottom!");
});
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
The solution is:
$('body').scroll(function(e){
console.log(e);
});
jQuery between <script> and </script> in the <head>,.scroll() event within$(document).ready(function(){
//do something
});
To whom its just not working to (like me) no matter what you tried:
<element onscroll="myFunction()"></element>
works like a charm
exactly as they explain in W3 schools https://www.w3schools.com/tags/ev_onscroll.asp
Source: Stackoverflow.com