Develop Reference

JS(jQuery) make div not appear second time when scrolling

I'm only learning JS(jQuery), and so I have a question. I wrote script where div is being showed when user scroll page to bottom and I want to add close button, so the user click on it and it will not appear when user scroll to bottom again. So:
<script>
$(window).scroll(function() {
if($(window).scrollTop() > ($(document).height() - $(window).height() - 200)) {
$('#div-name').css('visibility', 'visible')
}
};
$('#close-button).click(function(){
$('#div-name').css('visibility', 'hidden')
});
</script>
Pretty simple, but I want close-button it hide forever(till refreshed or revisit) and scroll function don't show this div for second time.
So I thought, if I do like this:
<script>
var wasClosed = false;
if(!wasClosed) {
$(window).scroll(function() {
if($(window).scrollTop() > ($(document).height() - $(window).height() - 200)) {
$('#div-name').css('visibility', 'visible')
}
}
};
$('#close-button).click(function(){
wasClosed = true;
$('#div-name').css('visibility', 'hidden');
});
</script>
But I don't understand why it not working, it keep popup again and again after i clicked close button.

FYI: You have some syntax errors in your code - missing semicolons and a missing parenthesis.
Option 1: You can unregister the scroll listener after clicking the button. Then the function where you put the visibility to visible will not be called anymore at all. Of course this only works if you don't use any other scroll scripts.
$(window).scroll(function() {
if($(window).scrollTop() >
($(document).height() - $(window).height() - 200) ) {
$('#div-name').css('visibility', 'visible');
}
});
$('#close-button').click(function(){
$('#div-name').css('visibility', 'hidden');
$(window).off('scroll');
});
Fiddle: https://jsfiddle.net/kx6fkp7n/
Option 2: initialize a variable in which you save the status, if it has been closed already. As soon as the button is pressed, you set the variable to true and in the scroll listener you make sure that the visibility changing does not occur anymore by extending the condition.
var wasClosed = false;
$(window).scroll(function() {
if(!wasClosed && $(window).scrollTop() >
($(document).height() - $(window).height() - 200) ) {
$('#div-name').css('visibility', 'visible');
}
});
$('#close-button').click(function(){
$('#div-name').css('visibility', 'hidden');
wasClosed = true;
});
Fiddle: https://jsfiddle.net/6dk443zd/
Why is your code not working: The problem with your solution is that you placed the if-condition before registering the scroll handler. So once it's registered (which is actually always on every page load) you're actually doing nothing with the changed variable. The if condition would need to be placed inside the scroll listener as stated in option 2.

Infinite scrolling jquery not working

I have a problem with infinite scrolling... This is the code:
<script>
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("test");
}
});
</script>
It alerts when user hits the top of the page, not the bottom. I can't figure out where the problem is. Thanks is advance.

$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
alert("test");
}
});
Here it alerts "test" when you hit the bottom of the page..
fiddle: https://jsfiddle.net/845k1c2b/
Hope this helps!

jquery : detecting scroll position

I want to get an alert when, while scrolling, my footer comes to view.
$(window).on("mousewheel", function(){
if ($(window).scrollTop() + $(window).height() > $('#footer').position().top){
alert("footer visible");
}
else{
alert("footer invisible");
}
});
http://jsfiddle.net/JRUnr/10/
All conditions with height seem right, but not during scrolling.

Working DEMO
Try this
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() > $('.footer').offset().top) {
alert("footer visible");
} else {
alert("footer invisible");
}
});
Hope this helps,Thank you

There is a jquery plugin for this task named jQuery Waypoints
(http://imakewebthings.com/jquery-waypoints/)
$('#footer').waypoint(function(direction) {
alert('Top of thing hit top of viewport.');
});

here is a working fiddle...
http://jsfiddle.net/kasperfish/JRUnr/14/
it is hacked together but it works
flag=true;
$(window).scroll(function() {
st=$(window).scrollTop();
$('#topscroll').html(st)
if(st>1450){
if(flag)
alert('test');flag=false;
}
});

window on scroll end event not working in IE 8

I am dynamic appending data to div using ajax when window scroll end and for that i have used scroll event as below.
$(window).scroll(function(event){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
alert("scroll");
}
});
above code is working fine in all browser but not working in IE 8.
for IE8 it through scroll event but will not entered in if condition some how.

can you try this?
$('html,body').animate({ scrollTop: 0 }, 5000, function() {
//callback function here
});

I have used this condition in scroll event like this :
var down = $(window).height() + 300;
if ($(window).scrollTop() > $(document).height() - down){
and now it is resolved.
Thanks.

How do I use JQuery to detect if a user scrolls to the bottom of the page?

And once it hits the bottom,then have a callback function?

You can use .scroll() event in this way on your window:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!");
}
});
check live demo
to detect if the user is 3/4 down the page you can try this one
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - .75*$(document).height()) {
alert("3/4th of bottom!");
}
});