Windows scroll working on scrolling to the top instead of bottom - javascript

I encountered a challenge when trying to activate autoload on scrolling to the bottom. The problem is that the jQuery doesn't work when I scroll to the bottom but when I scroll back to the top, it works.
I tried testing on 1.8.3 instead of the 1.11.1 I was using, the two are actually compressed.
I'm new to jQuery and would appreciate anyone who can assist me. I however tried testing the autoload on another computer and it works fine.
Below is the code
function auto_loader(){
$(window).scroll(function()
{
if($(window).scrollTop() + $(window).height() == $(document).height())
{
// load your content
alert("\ola");
}
});
}

I have always done this:
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
// Bottom of page
}
Fiddle: http://jsfiddle.net/tq0kxkhs/

Related

prevent scroll after page reloading

I save current scroll position using the following way:
$(window).on('unload', function() {
if ($(window).scrollTop() != 0) {
localStorage.setItem('lastScrollPosition', $(window).scrollTop());
$(window).scrollTop(0);
}
});
After page reloading I load images and I need to scroll at lastScrollPosition only when all images are loaded. So I call $(window).scrollTop(lastScrollPosition) after all images are loaded, browser scrolls at lastScrollPosition, but after that browser also scrolls at top of page (like $(window).scrollTop(0);), therefore, I get these action: $(window).scrollTop(lastScrollPosition) -> $(window).scrollTop(0)
Could you please advise how to fix my issue?
I found out the reason of the issue. This way works correctly, but a instagram library scrolls to top after my scroll. So this library has strange behavior.

Overflow Breaking ScrollTop / Not Registering Scroll

I have some CSS-driven parallax scrolling on my site, and I would also like to have a fixed top navigation bar appear when the user begins to scroll down the page. Currently, the nav bar only appears after you have scrolled PAST the end of the window (and disappears again when the window has "rubber banded" back into position). I'm using Chrome v38 on a Macbook. It looks like the overflow-x in my CSS is causing the scroll not to register/fire, but that's necessary for the parallax effect. Any help would be appreciated. Thanks.
CodePen example: http://codepen.io/anon/pen/jEPqYL (doesn't work exactly like in a browser, but that is my current code.)
My JS is:
(function($) {
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$('#header').fadeIn(500);
} else {
$('#header').fadeOut(500);
}
});
});
})(jQuery);

How to make this scrollTop function mobile-friendly

I have made a function wich runs on the computer very well. But on mobiles the position refreshes only when the scrolling stops. Its a known problem and i found answers but I didnt get it in my function working. Maybe one of you can help me.
my function:
$(window).scroll(function () {
if ($(window).scrollTop() >600) {
$('#logo').css('position', "fixed");
$('#logo').css('top', 0);
}
else if($(window).scrollTop() < 600) {
$('#logo').css('position', "relative");
$('#logo').css('top', 600)
}
});
and in the internet i found this which i should replace in my function:
$('body').on({
'touchmove': function(e) {
console.log($(this).scrollTop()); // Replace this with your code.
}
});
or this:
$('body').bind('touchmove', function(e) {
console.log($(this).scrollTop()); // Replace this with your code.
});
It would be nice if someone could rewrite my function so that it works smoothly in mobiles.
Edit
I explain shortly what this function do. When you load my page there is a blackscreen with a headline. Nothing else. when you scroll up the title should move up normaly until he reaches the top. when it reaches the top it gets the "position: fixed" attribute. when you scroll down it gets the "position: relative" attribute again. Nothing else should happen.
But on mobiles the text scrolls up until the scrolling stops (most of the time you scroll the text out of the screen) and pop up on the fixed position. But when it fixed everything is ok and it stands there.
The problem might be in the fixed position rather than in the scrollTop. Fixed positioned elements are not very mobile friendly.
Its behavior depends on the mobile device and OS.
More info: http://bradfrostweb.com/blog/mobile/fixed-position/

"infinite scroll" code working only for top scrolling

I'm using a "universal" piece of js that should detect if the user has scrolled to the bottom of the document:
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
//ajax code here
}
});
As the user scrolls, new content should load via the ajax call.
I would have expected the code to fire when I scroll DOWN, but the condition is actually firing when I scroll back to the TOP of the page, so it's basically doing the opposite of what it's "supposed" to do.
I've seen this solution being used in many examples, such as:
https://stackoverflow.com/a/17078097/1623095
My debugging messages:
console.log($(window).scrollTop());
console.log($(document).height());
console.log($(window).height());
These output when scrolling to the top:
0
1956
1956
And bottom:
961
1956
1956
The only plugin being loaded in my page is jquery (1.10.0.min), due to the nature of the project, I cannot link to the page.
Thoroughly confused by the dom behavior here.
I solved this some time before for someone else.
Have a look here:
Code
$(window).scroll(function () {
//- 10 = desired pixel distance from the bottom of the page while scrolling)
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
var box = $("#scrollbox");
//Just append some content here
box.html(box.html() + "<br />fa");
}
});
Fiddle
Just place your ajax code where I extended the content with simple html breaks

Calculating end of scroll on a web page

I need to calculate the end of scrolling on web page so that i can make an Ajax call.
I have searched posts in stackoverflow, but the solutions didn't worked for me.
I am using the below code ion order to determine that:
$(window).scrollTop() == $(document).height() - $(window).height()
but the above condition fails and am not able to get to know when page scroll ends.
As the values don't match on L.H.S and R.H.S the condition fails.
Just in order to check i used:
$(window).scrollTop() == $(document).height() - $(window).height() - 13
which works for chrome and firefox but fails for IE.
I need a concrete solution and don't want to hard code values.
Please help me in getting it right.
EDIT: To be specific, i am trying to calculate the end of vertical scroll bar.
Here is what I would do:
$(window).on('scroll', function() {
if($(window).scrollTop() != 0)
{
if( $(window).height() + $(window).scrollTop() >= $(document).height() )
{
//YES, I AM EXACTLY AT THE END OF THE SCROLL, PLZ FIRE AJAX NOW
}
}
});
CAUTION: Be very careful about having negative top margins though for styles in any of your elements on the page!! it may offset the calculation!
to calculate the end of scroll, try scrollHeight property.
This should retrieve the page height for you (not using jQuery but javascript instead):
var height = document.body.clientHeight;
You will find that this is the best cross-browser solution to your problem.
Here's how you do it. You take the scrolled distance and add the window height, then check if they equal the document height :
$(window).on('scroll', function() {
if (($(this).scrollTop() + $(this).height()) - $(document).outerHeight(true) >= 0) {
alert('Scrolled to bottom');
}
});
FIDDLE
This works for me in all five browsers!

Categories

Resources