I am trying to detect when the browser has scrolled all the way to the end of a div, to trigger an action when that occurs - add a class to the div divToCheckEndOf
I found a jQuery solution that checks for scrollTop and height of the window and document.
$(window).scroll(function () {
if ($(window).scrollTop() >= (($(document).height() - $(window).height()) - divToCheckEndOf.innerHeight())) {
divToCheckEndOf.addClass('abs');
} else {
divToCheckEndOf.removeClass('abs');
}
});
This code works fine on large desktop resolutions, but it fails on laptop resolutions and mobile devices.
Any feedback appreciated.
Thanks!
Not sure what the issue was here, but I ended up using this good old jquery solution:
if ($(window).scrollTop() > section.height() {
//we are underneath the section
}
Related
I've run into a bug/problem when i am trying to use infinity scroll in mobile browsers. I've made a project using vanilla js, and when the scrollbar goes to bottom it calls a function that fetching nextPage from an API( TMDB). Every time scrollbar touches bottom, it returns the next 20 items from the next page. So, in Desktop is all fine, but in mobile browsers, i am going to bottom and nothing happened. I think there is a problem with mobile browser topbar, but how i can fix it? Here is my code:
window.addEventListener("scroll", () => {
const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
if (scrollTop + clientHeight >= scrollHeight) {
showLoading();
}
});
I would be appreciate if anyone can give me a hint about it.
Thank you!
I am attempting to create a navigation bar that slides up and off the screen when a user scrolls down, and then scrolls back down when a user stops scrolling / scrolls up. Below is a snippet of my script and a jsfiddle:
$(document).ready(function() {
var position = $(window).scrollTop();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > position) {
$('.nav').addClass('active');
} else {
$('.nav').removeClass('active');
}
position = scroll;
});
});
https://jsfiddle.net/z2uc89sL/
Coupled with my CSS this works fine in all the browsers I have tested it in except for Safari (I'm running version 9.0.2 on a Mac). The problem that is occurring is that when you hit the top of page and there is no further room to scroll up, the nav gets hidden again by re sliding up (as though the user was actually scrolling down again rather than butting up to the top of the page). The opposite is happening at the bottom of the page too.
If you look at the fiddle in Safari you will see the issue I am talking about. If you look at the fiddle in any other browser you'll see what I'm trying to achieve.
This is because of bouncing effect in safari.
You can disable it with some extensions like iNoBounce.
Or simply compare current position like this.
if (scroll > position && position > 0) {
$('.nav').addClass('active');
} else if (position < $(window).height()){
$('.nav').removeClass('active');
}
Below i tried to provide you two different answers, First solution is related to your .nav class while Second is simulation of same functionality as a function. So, it could be reused.
var el = $(".nav");
$(window).scroll(function() {
el.addClass('active');
clearTimeout($.data(this, "scrollCheck"));
$.data(this, "scrollCheck", setTimeout(function() {
el.removeClass('active');
}, 250));
});
/*
* As a Function
*/
function scrollFunc(el) {
var el = el;
$(window).scroll(function() {
el.addClass('active');
clearTimeout($.data(this, "scrollCheck"));
$.data(this, "scrollCheck", setTimeout(function() {
el.removeClass('active');
}, 250));
});
}
scrollFunc($('nav'));
To see the results online, Please have a look at my fiddle https://jsfiddle.net/yeoman/g19nejfu/1/ i forked your question and update it with working answer.
I would love to explain about what's going on but actually this question is somehow answered already. So, for that purpose, i will share some useful links. One should check them out to understand it.
jQuery scroll() detect when user stops scrolling
http://gabrieleromanato.name/jquery-check-if-users-stop-scrolling/
Hope that my answer will you. Thanks, Cheers!
We have been looking for a while now but still haven't found the solution to this matter.
We are designing the site in wordpress
URL: http://jouwdesign.be/fontanella/site/lunchmenu/
The golden menu (.submenu) has a script linked to it wich should add the class 'test' when scrolling vertically past 100 pixels. For some reason it wouldn't even display a classchange when inspecting in chrome or any other browser. We already tried to disable all custom js and plugins but no luck so far.
Here is the jQuery:
jQuery(document).ready(function($) {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if ($(window).scrollTop() >= 100) {
$(".submenu").addClass("test");
}
});
});
Anyone who has experienced the same problem in wordpress or any other ways?
Thanks!
Found the solution. I had to remove 'height 100%' on my body tag in css
All works fine now!
I'm building a HTML website where I would like to load an iframe if the user scrolled nearly to the bottom.
(The iframe contains a lot of JavaScript heavy follow me widgets that are slowing down the website if they would be loaded directly)
How can that be done?
Thanks. Uli
use .scroll()
Like so:
$(window).scroll(function() {
if(($(window).scrollTop() + $(window).height()) == $(document).height()) {
$('div').append('<iframe></iframe>');
}
});
Here's a fiddle with an example - http://jsfiddle.net/vRLsg/
You can calculate the position when you scroll
$('body').scroll(function(){
if ($('body').scrollTop() == $('body').height()){
loadIframe();
}
});
Have a look at this jsfiddle - I guess it does what you need.
i have the following situation. I'm having a really long webpage where I want to have a little "back to top link" at the side of the page (absolute positioned). I want to show the link only if the user is scrolling and the scroll position is larger than 100px from the top. Moreover I'm constrain the behaviour only to screens larger than 300px and Non-iOS devices.
This is my code:
//Back to top
$(window).scroll(function () {
if ( $(window).width() > 300 || !isiOS ) {
if ($('body').scrollTop() > 100) {
$('#back-to-top').fadeIn('fast');
} else {
$('#back-to-top').fadeOut('fast');
}
}
});
$(window).scroll();
The problem is it works fine on my mac. However it does not work on Windows machines. It works in Chrome on windows, but doesn't in any IE version, nor Firefox, nor anything else. It works in every major browser on my mac.
Any idea what could cause that or why it's buggy?
Thank you for your help!
Try $(window).scrollTop() instead of $('body').scrollTop()