I have this type of problem.
I have a scroll event which is checking if I have reached end of the page and then it fetches data from the server and that part is working correctly.
Problem that I have is that on the older computers I have a problem of getting double items that are loaded when the scroll event happens.
What could I do to make this code work as it is working normally on the faster computers...
I tried to delay() the code inside the scroll event and the same thing is happening...
Code:
$(window).scroll(function()
{
if($(window).scrollTop() + $(window).height() == $(document).height())
{
$(".loader").show().delay(700).fadeOut();
$.ajax({ ///more code });
}
});
var loading = false;
$(window).scroll(function()
{
if($(window).scrollTop() + $(window).height() == $(document).height())
{
if(!loading){
loading = true;
$(".loader").show().delay(700).fadeOut();
$.ajax({ ///more code })
.done(function(){
loading = false;
});
}
}
});
You should not use this:
if($(window).scrollTop() + $(window).height() == $(document).height())
but this:
if($(window).scrollTop() + $(window).height() > $(document).height())
And use a var for the status and check it
Related
I have a working script which adds a class to the body after scrolling 80px.
This works but I need it to work too after having already scrolled and then refreshing the page.
So maybe replace the scroll part by position?
// fixed header
$(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 80) {
$("body").addClass('fixed');
} else {
$("body").removeClass("fixed");
}
});
});
$(window).scroll will only fire once a scroll event occurs. If you want to check for the scroll position when the page loads, you should do this outside of the $(window).scroll callback, like this:
function updateScroll() {
if ($(window).scrollTop() >= 80) {
$("body").addClass('fixed');
} else {
$("body").removeClass("fixed");
}
}
$(function() {
$(window).scroll(updateScroll);
updateScroll();
});
you're right. you need to check the event and the initial value:
window.addEventListener('load', function() {
var scroll = $(window).scrollTop();
if (scroll >= 80) {
$("body").addClass('fixed');
}
//no removing needed cause refresh did it
});
window.onscroll = function () { scrollFunction() };
function scrollFunction() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
document.querySelector(".fixed-top").classList.add("headerFix");
} else {
document.querySelector(".fixed-top").classList.remove("headerFix");
}
}
I have the below script, which is initialising a function upon reaching the bottom of the page (with a 1px threshold, as it doesn't seem to work without this). It is workming fine, but I'd like it to only work when reaching the bottom of the page the first time, if a user scrolls back up and down, nothing should happen.
Any suggestions?
JS
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > ($(document).height() - 1) ) {
// Function goes here
}
});
Use some flag for that:
var hasScrolled = false;
$(window).scroll(function() {
if(!hasScrolled && $(window).scrollTop() + $(window).height() > ($(document).height() - 1) ) {
hasScrolled = true
// Function goes here
}
});
add another variable that would keep track if the user has scrolled already.
`
scrolled = false;
if($(window).scrollTop() + $(window).height() > ($(document).height() - 1) && !scrolled) {
// Function goes here
scrolled = true;
}
I used the following function to scroll my document to specific point when user tries to scroll on the page. For this I used following code:
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$("html, body").animate({scrollTop: 700}, 500);
return false;
}
});
I want to know if there are event listeners for the mousewheel actions or not. When using this I can not actually scroll back up to the top of the document, because the scroll of mouse re-invokes the function and it pulls down the document again.
Also, if there is an alternative way, please let me know.
Can I do this using CSS only for cases where JS may be disabled by the user/client?
EDIT:
After your short explanation I (hopefully) understand what do you want.
I made a function with position states:
header, content, unresolved
and I reused your scrolling function with state condition.
(function() {
var pagePosition = "header";
$(window).scroll(function(){
if ($(this).scrollTop() > 0 && pagePosition == "header") {
pagePosition = "unresolved";
$("html, body").animate({scrollTop: 700}, 500, function() {
pagePosition = "content";
});
return false;
} else if ($(this).scrollTop() < 700 && pagePosition == "content") {
pagePosition = "unresolved";
$("html, body").animate({scrollTop: 0}, 500, function() {
pagePosition = "header";
});
return false;
}
});
})();
This question already has answers here:
Check if a user has scrolled to the bottom (not just the window, but any element) [duplicate]
(31 answers)
Closed 9 years ago.
How to prevent this double triggering at the bottom of the webpage.
Here is the option when you reach 100px from the bottom you see alert message but when you hit bottom you see it too and I only want to see it once even if you hit the bottom of the webpage.
Here is the link:
double triggering
And the code:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
alert("bottom!");
}
});
EDIT:
Problem is that I am appending multiple divs to the website and I do not have fixed number of them, so that is why I need to check if I have hit the bottom of the page.
You can set a flag to control this behaviour:
var alerted = false;
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
if (!alerted) {
alert("bottom!");
alerted = true;
}
}
else alerted = false;
});
http://jsfiddle.net/gWD66/1117/
The general answer is to simply remove the event handler once it has triggered.
jQuery can do this for you, however, with its .one() event handler function.
try this:
var beenOnBottom = false;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
if(!beenOnBottom)
{
alert("bottom!");
beenOnBottom = true;
}
}
});
If you want to show the message when you go up again, you can reset the beenOnBottom variable as soon as go above the 100px value
I'm trying to make a web page that works with unlimited scrolling. Now the problem is, it doesn't seem to work right now:
window.scroll(function() {
alert('Scrolling');
if ($(this)[0].scrollHeight - $(this).scrollTop() == $(this).outerHeight()) {
alert('Reached the bottom');
}
});
I'm really new to jquery, even though it's essentially javascript(right?) anyways, what am I doing wrong? I have also tried document.scroll and document.body.scroll
Try this:
if ($(this).scrollTop() == $(document).height() - $(window).height()) {
alert('Reached the bottom');
}
I jsfiddle'd it and it works: http://jsfiddle.net/wcKVK/1/
You have at least one error there. Try:
$(window).scroll(function() {
alert('Scrolling');
if ($(this)[0].scrollHeight - $(this).scrollTop() == $(this).outerHeight()) {
alert('Reached the bottom');
}
});
I think this is what you're trying to achieve:
$(window).scroll(function() {
if ($('body').scrollTop() + $(window).height() == $('body').outerHeight()) {
alert('Reached the bottom');
}
});
(function ($) {
$(window).scroll(function () {
if ($(this).scrollTop() == $(document).height() - $(window).height()) {
alert('bottom');
}
});
}(jQuery));
is what works for me.