Develop Reference

How to detect when a user has scrolled to the bottom of a div in jQuery?

There are a few people who have already asked this question but the last one I can see is almost 10 years old and the code that was given in the answer doesn't seem to work or at the very least doesn't work every time so I thought I would write this as it seems like the code is outdated.
Anyway, I have a div with the id terms, the overflow is set to auto so it is scrollable. I want a hidden div to become visible when the user has scrolled to the bottom of the terms div. At the moment I'm using this
jQuery(function($) {
$('#terms').on('scroll', function() {
if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
alert('end reached');
}
})
});
but it doesn't work.

Your code works well for me.
You can test this code too. I hope this help you:
jQuery(function ($) {
$('#terms').bind('scroll', function () {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
alert('end reached');
}
})
});

Thanks to Elham linking me to this page https://www.w3docs.com/tools/code-editor/10827 the page had a negative value on it's if statement I added -100 to my if statement and that gave the event a bit of padding and it works every time.
jQuery(function ($) {
$('#terms').bind('scroll', function () {
if ($(this).scrollTop() + $(this).height() >= $(this)[0].scrollHeight - 100) {
alert('end')
}
})
});

Script not working (but works fine on other site)

Ok this is probably a dumb question but, I'll ask. I'm trying to make a div stick when you pass a point on the page while scrolling. I have this script:
<script type="text/javascript">
$(document).ready(function() {
var s = $("#sticker");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top + 335) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});
});
</script>
Which works fine on one of my site. But now I'm trying it on a new site. And every time I get an error in my console log saying: TypeError: $ is not a function And when I look at the error in my code it highlights the $(document).ready(function() { part.
If I remove the $(document).ready part and the }); it tells me the var s = $("#sticker"); part is $ is not a function.
I have tried
<script type="text/javascript">
jQuery(document).ready(function() {
var s = $("#sticker");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top + 335) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});
});
</script>
Then it skips the (document).ready part, but it again tells me my var part is not a function.
If I remove the script I don't have any console log messages. What could be the problem? I tried putting the code in the header and footer and even just before the <div id="sticker">...</div>. Nothing seems to work. The script works perfectly on an other site...

You are running jQuery in noConfilct mode. Which mean, jQuery is only available by jQuery, not over $. You can wrap your code with an ready state or an IIFE to get access to jQuery by $.
Ready State:
jQuery(document).ready(function($) {
// access jQuery by '$' inside
});
// this is a shorthand for the above '.ready' creation
jQuery(function($) {
// access jQuery by '$' inside
});
IIFE:
(function($) {
// access jQuery by '$' inside
})(jQuery);

I need a jQuery function to only work above 700px screen size, cant spot the error in my code

I have a jquery function that i want to disable below 700px. I have the following function:
<script>
$(document).ready(function() {
$(window).resize();
});
</script>
and
<script>
$(window).resize(function() {
if( $(this).width() > 700 ) {
$(window).load(function() {
$('.dh-container').directionalHover();
});
}
});
</script>
This seems like it should work, but i'm a noob to jquery, and can't find the error in my code, and the chrome inspector isn't displaying any errors.
If someone could spot my error, that would be great. And in the future, how would i go about diagnosing a jquery error that the chrome inspector doesn't point out?
Thank you

Your code works fine
<script>
$(document).ready(function() {
$(window).resize();
});
$(window).resize(function() {
if( $(this).width() > 700 ) {
$(window).load(function() {
alert("It's Working above 700px width");
});
}
});
</script>
Always start by testing simple procedures to find out mistakes.
Another way:
<script>
var width = $(window).width();
if (width > 700) {
alert('Display Above 700px');
} else {
alert('Do nothing since it's under 701px');
}
</script>

Can't get scrolltop to work correctly

I've created a fiddle to show what is happening.
I am using jquery to fade in a link to the top of the page when the user is scrolling down.
I can get it to work on jsfiddle if I place the code in the javascript window, but if I put it in script tags where my $( window ).load(function() is in the HTML window, it doesn't work at all. Does anybody know why?
$('#slide').bind("scroll", function() {
if ($(this).scrollTop() > 20) {
$("#top").fadeIn();
} else {
$("#top").stop().fadeOut();
}
});
$('#top').on("click",function(){
$('#slide').animate({scrollTop:0}, 'slow');
});
here's the fiddle:
https://jsfiddle.net/8130fdhm/2/
Any help would be most appreciated.

Put in a script tag just before the body end tag. I have updated the jsfiddle here https://jsfiddle.net/8130fdhm/3/
....
<script>
$('#slide').bind("scroll", function() {
if ($(this).scrollTop() > 20) {
$("#top").fadeIn();
} else {
$("#top").stop().fadeOut();
}
});
$('#top').on("click",function(){
$('#slide').animate({scrollTop:0}, 'slow');
});
</script>
</body>

Jquery Scroll() requires 2 Arguments

I am trying to remove a class from a menu bar when the user scrolls down a page. I read the following topic and doc to get an idea on jquery scroll():
1) https://stackoverflow.com/a/16391580/1050957
2) http://api.jquery.com/scroll/
This is my code:
var jquery = jQuery.noConflict();
jquery(document).ready(function(){
$(window).scroll(function () {
if (document.body.scrollTop > 100)
$('#menuBar').removeClass( "nav-menu" );
else
// something something
});
});
The above code is an extract from the SO answer from another topic (link given above). But when I add that code, I am seeing: Not enough arguments to Window.scroll. error for $(window).scroll(function (). I dont know why its expecting 2 arguments since the doc I read on scroll() uses without an argument. Have I done something wrong? Or has something changed with the later version of Jquery?
I am using jquery v1.11.0

Use a full jquery code. Working example:
#menuBar { background: yellow; width: 50px; height: 800px; }
#menuBar.nav-menu { background: red; }
<div id="menuBar" class="nav-menu"></div>
<div style="margin-bottom: 999em;"></div>
$(document).ready(function(){
$(window).on('scroll', function () {
var $body = $('body');
var $target = $('#menuBar');
if ($body.scrollTop() > 100 && $target.hasClass('nav-menu')){
$target.removeClass("nav-menu");
}
else if( $body.scrollTop() <= 100 && !$target.hasClass('nav-menu') ){
$target.addClass('nav-menu');
}
});
});
Make sure to check if the class is already added to prevent innecesary stuff.
Check jsfiddle

You can add an empty param if needed to your scroll function:
$(document).ready(function(){
$(window).scroll([], function () {
...
});
});
Take a look at this:
http://colorlib.com/wp/forums/topic/fix-a-bug-in-latest-version-window-scroll/