JavaScript:
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
$('#footer').show();
}
});
CSS:
#footer {
display: none;
}
This is supposed to reveal a hidden div at the bottom of a page when scrolled all of the way down to the bottom. For some reason, the hidden div never gets shown in Firefox. Is there another method using jQuery to create the same effect?
EDIT: Here's the page where it's not working correctly in Firefox
http://safe.tumblr.com/theme/preview/34069
You need to be using this:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$('#footer').show();
}
});
There may be a small difference between the max value for scrollTop and what documentHeight - windowHeight gives you, so I would propose to subtract a small safety factor:
$(window).scroll(function(){
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 3) {
$('#footer').show();
}
});
Related
This must be some silly error but in my javascript function, the if statment that should be executing when i reach bottom of screen, is executing when i reach top of my screen ...
Here is my code :
$(window).scroll(function() { //detect page scroll
if($(window).scrollTop() + $(window).height() == $(document).height()) //user scrolled to bottom of the page?
{
$('.animation_image').show(); //show loading image
}
});
.animation_image is a loading image that should appear when i reach bottom of screen but is appearing when i scroll down and then back up to the top of the screen ...
If someone can explain what i am doing wrong, that would be great !
Well it should work properly. Though just out of curiosity, this code never hides the image. Shouldn't it have else where you give it a hide?
There you go, a Fiddle https://jsfiddle.net/3eg18L8u/
$(window).scroll(function() { //detect page scroll
if($(window).scrollTop() + $(window).height() == $(document).height()) //user scrolled to bottom of the page?
{
$('.animation_image').show(); //show loading image
}
else {
$('.animation_image').hide(); //show loading image
}
});
Have you tried >= instead of ==?
if ($(window).scrollTop() + $(window).height() >= $(document).height())
{
$('.animation_image').show(); //show loading image
}
How about:
$(document).ready(function(){
$(window).scroll(function(e){
e.stopPropagation();
e.preventDefault();
var scrollBottom = $(document).height() - $(window).scrollTop() - $(window).height();
if (scrollBottom == 0) {
$('.animation-image').show();
}
});
});
I can't seem to understand why it isn't working even with all the help from you guys, so i gave up and decided to go with this code wich isn't the solution, but more an alternative :
function yHandler(){
var wrap = document.getElementById('wrap');
var contentHeight = wrap.offsetHeight;
var yOffset = window.pageYOffset;
var y = yOffset + window.innerHeight;
if(y >= contentHeight){
$('.animation_image').show();
}
var status = document.getElementById('status');
status.innerHTML = contentHeight+" | "+y;
}window.onscroll = yHandler
With html content structure like follows:
<body>
<div id="status">0 | 0</div>
<div id="wrap">
*ALL CONTENT*
</div>
</body>
and CSS:
div#status{position:fixed; font-size:24px;}
Trying to implement a parallax scroll (got two separate elements) #slides and #body, the #body will overlay the #slides when you scroll down the page (parallax effect)
Problem arises when you scroll right to the bottom of the page, it appears to jump...think it is looking at the height.
here is the code.
<script>
$(window).scroll(function () {
var n1 = ($(this).scrollTop() / 0.2)+'px';
$('#slides').css({ 'top': 0-($(this).scrollTop() / 0.9) + "px"});
console.log(n1);
$('#body').css({ 'margin-top': 0-($(this).scrollTop() / 0.45) + "px"});
});
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
alert("bottom!");
}
});
</script>
I am wanting to create a jquery function to "disable" this slide when it hits the footer HTML tag? any ideas how to write this. I have done an "alert" so this fires when you scroll down...but wanting to transfer this into "disbaling" jQuery scroll
Fixed this now, this can be removed
I want to know a code for continuous website that if i scroll to the bottom and will get back to top, and otherwise.
i already in a half way that i used this code for the bottom page :
$(document).ready(function() {
$(document).scroll(function(){
if (document.documentElement.clientHeight + $(window).scrollTop() >= $(document).height()) {
$(document).scrollTop(0);
}
});
});
how can i make conversely?
from top to the bottom page?
EDIT:
$(document).ready(function() {
$(document).scroll(function(){
if (document.documentElement.clientHeight + $(window).scrollTop() >= $(document).height()) {
$(document).scrollTop(0);
}
else if ($(window).scrollTop() <= 0) {
$(document).scrollTop($(document).height());
}
});
});
i tried that code and it works, but i think there is a little bug there, i need to scroll a bit more to get to bottom from top or otherwise, why is that happen?
Thanks
scrollTop can't go below 0, so you probably want to leave a buffer at the top of the page which sends you to the bottom when you scroll above it.
Something like this:
var BUFFER = 10;
$(document).ready(function() {
$(document).scrollTop(BUFFER);
$(document).scroll(function(){
var scrollPos = document.documentElement.clientHeight + $(window).scrollTop();
if (scrollPos >= $(document).height()) {
$(document).scrollTop(BUFFER);
} else if (scrollPos < BUFFER) {
$(document).scrollTop($(document).height());
}
});
});
i think this will help
window.scrollTo(0,document.body.scrollHeight);
or if you want to use jQuery get it from this thread
I've got a script that works out the distance of a list of elements from the top of the page, but I am unsure how to detect it's distance from the bottom. When it hits the bottom (well, 20px before the bottom) I want to fire an event and fade it out:
$(window).on('load resize scroll', function () {
$('.links__item').each(function () {
if (($(this).offset().top - $(window).scrollTop()) < 20) {
$(this).stop().fadeTo(100, 0)
} else {
$(this).stop().fadeTo('fast', 1)
}
})
})
If anyone has any advice, much appreciated. I'm looping through the elements to detect it, so when one of them hits 20px from the bottom, I want to fade it out. Thanks!
You can use the jQuery function height() at your calculations, like:
$(window).height();
$(this).height();
Specifically, if you want to detect if the top of the element is near to the bottom of the page, you can use this calc:
if ( $(this).offset().top > ($(window).scrollTop() + $(window).height() - 20) ) // True
Halcyon,
I am not sure what you want to fire but you can test the bottom of the page like this
$(window).on('load resize scroll', function () {
$('.links__item').each(function () {
if( ($(this).offset().top > ($(window).scrollTop() + $(window).height() - 20)) {
$(this).stop().fadeTo(100, 0)
} else {
$(this).stop().fadeTo('fast', 1)
}
})
})
Reason being is jQuery finds bottom of the page based upon its height
1 $(window).height(); // returns height of browser viewport
2 $(document).height(); // returns height of HTML document
I have a div which I want to become fixed at 20px from the top of the window when you scroll up and 40px from the footer when you get the bottom. My code seems inconstant, there must be a better way? Page Link
$(document).scroll(function () {
if($(window).scrollTop() >= 345){
$('#rightShipping').css({'position' : 'fixed', 'top' : '0px'});
}
if($(window).scrollTop() <= 346){
$('#rightShipping').css({'position' : '', 'top' : ''});
}
console.log($(window).scrollTop());
});
One quick idea - I would remove the .rightCol block, leaving only the #rightShipping one with top: 20px and it parent with position: relative. And then use this code:
$(document).scroll(function () {
var scrollTop = $(window).scrollTop();
var offsetTop = $('#rightShipping').offset().top;
var positionTop = $('#rightShipping').position().top;
if (scrollTop >= offsetTop - positionTop) {
$('#rightShipping').css('position', 'fixed');
} else {
$('#rightShipping').css('position' : 'relative');
}
});
I really don't know if this will work, as I haven't tested it and I need to get some sleep, but I hope it helps.
Good luck!