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;
}
Related
This is throwing me for a loop..
The basic idea is we're using $(window).scroll() and as you scroll down the page, when an element is in view by using offset() with scrollTop "do something" then when you hit the next element down the page "do something more".
However, because the scroll event (probably the wrong term) fires every single time in the conditional statement because technically the statement is true every scroll, I need it to only fire once, but then be able to 're-fire again' one time when the next conditional happens.
$(window).scroll(function(){
let windowTop = $(window).scrollTop()
if( windowTop > $('.element').offset().top && windowTop < $('.element2').offset().top ) {
doSomething(); // want this to only fire once
} else if( windowTop > $('.element2').offset().top ) {
doSomething(); // want this to only fire once
}
});
I had a theory about possibly setting a variable to true so it only fire's doSomething() once, but then when it's inside the 2nd conditional statement I can't wrap my head around undoing / resetting it.
let fired = false;
$(window).scroll(function(){
let windowTop = $(window).scrollTop()
if( windowTop > $('.element').offset().top && windowTop < $('.element2').offset().top ) {
if(!fired){
doSomething();
fired = true;
}
} else if( windowTop > $('.element2').offset().top ) {
// need to somehow set fired to false again so it triggers once then sets back to true
if(!fired){
doSomething();
fired = true;
}
}
});
Hope I somehow made sense!
Consider the following.
var fire = {
"element1": true,
"element2": true
};
$(window).scroll(function(event){
var windowTop = $(window).scrollTop();
console.log("Window Scroll Top: " + windowTop);
if( fire.element1 && (windowTop > $('.element').offset().top && windowTop < $('.element2').offset().top) ) {
console.log("Do Something!", $('.element').offset().top);
fire.element1 = false;
doSomething();
} else if( fire.element2 && (windowTop > $('.element2').offset().top) ) {
console.log("Do Something!", $('.element2').offset().top);
fire.element2 = false;
doSomething();
}
});
The logic here is we check if we should fire the event for each element. In this way we have a more complex IF condition. Fire for that element must be true and the Scroll position must have gone down far enough.
If the Top of the element is 100, this condition should only be true at one time and one time only, when windowTop is a value of 101 or higher. Now if you want it to trigger when the element is fully in view, you need the Top plus the Height. If it's 40px tall, then it would be 140 (Top + Height).
This is a #id link to one page:
This is the #id link to another:
I have WP Rocket Installed, have tried to disable the JS settings but it didn't work either.
I am a novice so your advise is much appreciated.
// PAGE SCROLLER
// PUSHES ANCHOR BELOW DEPTH OF NAVBAR
(function($){
$(document).ready(function () {
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
$(this).collapse('hide');
}
});
function scroll_if_anchor(href) {
href = typeof(href) == "string" ? href : $(this).attr("href");
if (screen.width <= 320) {
var fromTop = 120;
} else if (screen.width <= 768) {
var fromTop = 124;
} else {
var fromTop = 90;
}
// If our Href points to a valid, non-empty anchor, and is on the same page (e.g. #foo)
// Legacy jQuery and IE7 may have issues: http://stackoverflow.com/q/1593174
if(href.indexOf("#") == 0) {
var $target = $(href);
// Older browser without pushState might flicker here, as they momentarily
// jump to the wrong position (IE < 10)
if($target.length) {
$('html, body').animate({ scrollTop: $target.offset().top - fromTop });
if(history && "pushState" in history) {
history.pushState({}, document.title, window.location.pathname + href);
return false;
}
}
}
}
// When our page loads, check to see if it contains and anchor
scroll_if_anchor(window.location.hash);
// Intercept all anchor clicks
$("body").on("click", "a", scroll_if_anchor);
});
})(jQuery);
First you need to check the error $ is not a function (https://prnt.sc/12ald0n) and need to solve it. For better example you can take reference from here https://api.jquery.com/scrolltop/ to scroll top functionality.
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 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
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