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.
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'm trying to addClass and removeClass to a div based on top scrolling with jquery.
I created these two variables:
var mainHeight = $('#main-image').height()/1.10;
var footHeight = $('body').height() - $('footer').height();
And this is the script that doesn't works:
$(window).scroll(function(){
if ($(window).scrollTop() > mainHeight) {
$('#box_centrale').removeClass('chat-bottom, chat-top');
} else if ($(window).scrollTop() > footHeight) {
$('#box_centrale').removeClass('chat-bottom');
$('#box_centrale').addClass('chat-top');
} else {
$('#box_centrale').removeClass('chat-top');
$('#box_centrale').addClass('chat-bottom');
}
});
The "if" and "else" statement works but "else if" statement doesn't work...
Have you any idea why does not work?
(I apologize for my English)
I solved! There was an error in the second variable, missing parentheses to the operation. I decide to create a jsfiddle with an example of what I wanted to do, hoping that it will help someone in the future.
Thank you all
Here the link:
JSFiddle
$(document).ready(function(e) {
var mainHeight = $('#header').height()/2;
var footHeight = ($('body').height() - $('#footer').height() - 290);
$(window).scroll(function(){
if ($(window).scrollTop() < mainHeight) {
$('#fixed-box').css({
"bottom" : "calc(100% - 310px)",
});
} else if ($(window).scrollTop() > footHeight) {
$('#fixed-box').css({
"bottom" : "calc(260px)",
});
} else {
$('#fixed-box').css({
"bottom" : "calc(50% - 25px)",
});
}
});
});
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;
}
});
})();
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
I'm creating magento shop and i want to make toTop button available after user scrolls the window.
I paste mine code bellow, it works fine, but after window is on top, i can't move it anymore, it's stuck.
jQuery(window).scroll(function() {
var top = jQuery(window).scrollTop();
if (top > 77) {
jQuery(function() {
jQuery('img.arrowup').fadeIn();
jQuery('div.header_bg').show();
jQuery('div.mainmenu').addClass('stick');
jQuery('body div.header-container').next().addClass('pad');
jQuery("img.arrowup").on('click', function(e) {
e.preventDefault();
jQuery('body,html').animate({scrollTop:10},800);
});
})} else {
jQuery('div.header_bg').hide();
jQuery('img.arrowup').fadeOut();
jQuery('body div.header-container').next().removeClass('pad');
jQuery('div.mainmenu').removeClass('stick');
}
});
============================
Thanks everybody for help, here's working solution with stick header and toTop animation :)
var scrollDiv=jQuery(this);
jQuery(window).scroll(function(){
if(jQuery(window).scrollTop()<="77"){
jQuery("img.arrowup").fadeOut("slow");
jQuery('div.header_bg').hide();
jQuery('div.mainmenu').removeClass('stick');
} else {
jQuery("img.arrowup").fadeIn("slow");
jQuery('div.header_bg').show();
jQuery('div.mainmenu').addClass('stick');
}
});
jQuery("img.arrowup").click(function(){
jQuery("html, body").animate({scrollTop:0},"slow");
});
I suggest to read this answer first for understanding why animations creates conflict depends on scroll value, than give it a try to this:
$(document).ready(function() {
$(window).scroll(function() {
var scrollVal = $(this).scrollTop(); // use this instead of window
if ( scrollVal >= 0 && scrollVal < 77 ) {
//do something without animations
$('div.header_bg').hide();
$('div.mainmenu').removeClass('stick');
} else if ( scrollVal === 77 ){
//i didn't try this before but it may work,
//since value equals 77 once, it may not create animation conflicts
$('img.arrowup').fadeIn();
} else if ( scrollVal > 77 ) {
//do something without animations
$('div.header_bg').show();
$('div.mainmenu').addClass('stick');
}
});
});