I have the following code which gets the amount the user has scrolled from the top and the bottom and then using these values it should hide or show the shadows.
$(document).ready(function() {
if ( $(window).scrollTop() + $(window).height() >= $(window).height() ) {
$('div.shadow-bottom').show();
}
$(window).scroll(function () {
if ( $(window).scrollTop() >= 15 ) {
$('div.shadow-top').show();
} else {
$('div.shadow-top').hide();
}
if ( $(window).scrollTop() + $(window).height() >= $(window).height() - 15 ) {
$('div.shadow-bottom').show();
} else {
$('div.shadow-bottom').hide();
}
});
});
The top works fine, but the bottom one should be hiding when you get to the bottom of the page BUT then show again if you are 15 pixels from the bottom.
Example: http://dev.driz.co.uk/shadow/
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
Change your code to:
$(document).ready(function() {
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 15) {
$('div.shadow-bottom').show();
}
$(window).scroll(function() {
if ($(window).scrollTop() >= 15) {
$('div.shadow-top').show();
} else {
$('div.shadow-top').hide();
}
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 15) {
$('div.shadow-bottom').show();
} else {
$('div.shadow-bottom').hide();
}
});
});
The correct working example is:
$(document).ready(function() {
if ($(window).height() < $(document).height()) {
$('div.shadow-bottom').show();
}
$(window).scroll(function() {
if ($(window).scrollTop() >= 15) {
$('div.shadow-top').show();
} else {
$('div.shadow-top').hide();
}
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 15) {
$('div.shadow-bottom').hide();
} else {
$('div.shadow-bottom').show();
}
});
});
Which is based on bhb's answer above.
Related
Currently I detect when I am at the bottom of the page.
I have a input hidden on the html, and when you scroll to the bottom, the input gets +1, but, when you get to the bottom, it adds alot of numbers.
How I add only +1 and it doesn't get alot of +1?
function finalPage() {
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() > $(document).height() -500) {
loadMore();
}
});
}
var num = $("#page").val();
num++;
$("#page").val(num);
Try this:
function finalPage() {
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() > $(document).height() -500) {
loadMore();
$("#page").val($("#page").val()+1);
}
});
}
jQuery won't remove the class after scrolling
This is my script:
$(window).scroll(function(){
if($(window).scrollTop() >= $("#white").offset().top -70) {
$('.burger-menu').addClass('white');
} else {
$('.burger-menu').removeClass('white');
}
});
$(window).scroll(function(){
if($(window).scrollTop() >= $("#color-main").offset().top -70) {
$('.burger-menu').addClass('color-main');
} else {
$('.burger-menu').removeClass('color-main');
}
});
$(window).scroll(function(){
if($(window).scrollTop() >= $("#yellow").offset().top -70) {
$('.burger-menu').addClass('yellow');
} else {
$('.burger-menu').removeClass('yellow');
}
});
This is my HTML:
<section class="home-page" id="white">Blablabla</section>
<section class="wrap" id="color-main">Blablabla</section>
<section class="wrap" id="yellow">Blablabla</section>
but my <div>
<div class="burger-menu white color-main yellow">
still has the classes "white" and "color-main", which should be removed. :(
I made a codepen for you to see it.
There are 2 fixes I would recommed you try:
Don't do multiple .scroll(function(){...}) calls, they overwrite each other.
Use $("body").scroll(function(){...}), because that's the element you (usally) scroll in
The below example uses only the IF statement and deletes the other classes. Try this and see if you get the result you desire. Instead of relying on an ELSE that could be broken by another scroll function else statement we simply remove all classes and only add the class you want.
Example:
$(window).scroll(function () {
if ($(window).scrollTop() >= $("#white").offset().top - 70) {
$('.burger-menu').removeClass("color-main").removeClass("yellow").addClass('white');
}
});
$(window).scroll(function () {
if ($(window).scrollTop() >= $("#color-main").offset().top - 70) {
$('.burger-menu').removeClass("white").removeClass("yellow").addClass('color-main');
}
});
$(window).scroll(function () {
if ($(window).scrollTop() >= $("#yellow").offset().top - 70) {
$('.burger-menu').removeClass("color-main").removeClass("white").addClass('yellow');
}
});
I agree with those who suggest putting them all in a single .scroll() function. This worked for me:
(function($) {
$(window).scroll(function () {
if ($(window).scrollTop() >= $("#white").offset().top - 70) {
$('.burger-menu').addClass('white');
} else {
$('.burger-menu').removeClass('white');
}
if ($(window).scrollTop() >= $("#color-main").offset().top - 70) {
$('.burger-menu').addClass('color-main');
} else {
$('.burger-menu').removeClass('color-main');
}
if ($(window).scrollTop() >= $("#yellow").offset().top - 70) {
$('.burger-menu').addClass('yellow');
} else {
$('.burger-menu').removeClass('yellow');
}
});
})(jQuery);
To have only one class active at a time, use removeClass to remove the others. You can use a single scroll event handler, and rearrange the code to look for the last section first, that makes the code simpler:
$(window).scroll(function(){
var top = $(window).scrollTop() + 70;
if (top >= $("#yellow").offset().top) {
$('.burger-menu').removeClass('white color-main').addClass('yellow');
} else if(top >= $("#color-main").offset().top) {
$('.burger-menu').removeClass('white yellow').addClass('color-main');
} else if (top >= $("#white").offset().top) {
$('.burger-menu').removeClass('color-main yellow').addClass('white');
} else {
$('.burger-menu').removeClass('white color-main yellow');
}
});
Demo: https://jsfiddle.net/Guffa/yka8nzt4/1/
Another way would be to determine the status for each class:
$(window).scroll(function(){
var top = $(window).scrollTop() + 70;
var white = top >= $("#white").offset().top;
var main = top >= $("#color-main").offset().top;
var yellow = top >= $("#yellow").offset().top;
$('.burger-menu')
.toggleClass('white', white && !main)
.toggleClass('color-main', main && !yellow)
.toggleClass('yellow', yellow);
});
function firstAnimation() {
$('.etc(1)').fadeIn();
}
function secondAnimation() {
$('.etc(1)').fadeOut();
$('.etc(2)').fadeIn();
}
function thirdAnimation() {
$('.etc(2)').fadeOut();
$('.etc(3)').fadeIn();
}
function fourthAnimation() {
$('.etc(3)').fadeOut();
$('.etc(4)').fadeIn();
}
$(window).scroll(function() {
if ($(this).scrollTop() > 150) {
firstAnimation();
}
if ($(this).scrollTop() > 300) {
secondAnimation();
}
if ($(this).scrollTop() > 450) {
thirdAnimation();
}
if ($(this).scrollTop() > 600) {
fourthAnimation();
}
});
Guys, i'm using scrollTop() to animate a piece of my site, and i was wondering if i can reverse the animation if o scroll to the bottom, and not to the top.
I was searching but there isn't a scrollBottom in jquery.
First, set an additional requirement for each if statement to condition each event to a scroll range to prevent multiple events from being triggered. Second, add a .fadeOut() function to the next elements so that the effect is reversed when the user scrolls the opposite direction.
The code should look like:
function firstAnimation() {
$('.etc1').fadeIn();
$('.etc2').fadeOut();
}
function secondAnimation() {
$('.etc1').fadeOut();
$('.etc2').fadeIn();
$('.etc3').fadeOut();
}
function thirdAnimation() {
$('.etc2').fadeOut();
$('.etc3').fadeIn();
$('.etc4').fadeOut();
}
function fourthAnimation() {
$('.etc3').fadeOut();
$('.etc4').fadeIn();
}
$(window).scroll(function() {
if ($(this).scrollTop() > 1500 && $(this).scrollTop() < 3000) {
firstAnimation();
}
if ($(this).scrollTop() > 3000 && $(this).scrollTop() < 4500) {
secondAnimation();
}
if ($(this).scrollTop() > 4500 && $(this).scrollTop() < 6000) {
thirdAnimation();
}
if ($(this).scrollTop() > 6000) {
fourthAnimation();
}
});
Demo on JSFiddle
To scroll to the bottom of the document, try:
$(window).scrollTop($(body).height());
$(window).load(function() {
$("html, body").animate({ scrollTop: $(document).height() });
});
I want to run an alert if the viewport is wider than 1250px and if the user is near the bottom of the page.
I currently have the two snippets of code which work individually...
function checkSize(){
if ($(window).width() > 1250) {
alert('hello');
}
}
checkSize();
$(window).resize(function() {
checkSize();
});
and the other snippet which detects how far the user has scrolled down...
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 700) {
alert('hello');
}
});
How can I combine the two in one if statement? I have tried this but it does not seem to work..
function checkSize(){
if ($(window).width() > 1250 && $(window).scrollTop() + $(window).height() > $(document).height() - 700) {
alert('hello');
}
}
checkSize();
$(window).resize(function() {
checkSize();
});
Following discussion in comments. This seems to be working:
function checkSize(){
if($(window).width() > 1250 && $(window).scrollTop() + $(window).height() > $(document).height() - 700) {
console.log('hello');
}
}
checkSize();
$(window).scroll(checkSize);
$(window).resize(checkSize);
Demo
(($(window).width() > 1250) && ($(window).scrollTop() + $(window).height()) > $(document).height() - 700)
You need to place () to show what you what to calculate!
So I've got an div that slides down when you scroll near the bottom of the page. In that div, I have an "X" anchor that slides it up again (this is in jQuery). But if I scroll, the div slides down again (naturally). So I want the X to first of all, make "#topDiv" slide up, and then ignore the function that makes it slideDown.
Full code:
$("#topDiv").hide();
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 500) {
$("#topDiv").slideDown();
}
if ($(window).scrollTop() + $(window).height() < $(document).height() - 800) {
$("#topDiv").slideUp();
}
$("#closeTop").click(function () {
$("#topDiv").slideUp();
return false;
});
});
Demo Page ( http://tutorials.underbakke.net/js/function/ )
You could use the on/off methods to unbind the slidedown after the "X" is clicked
$("#topDiv").hide();
$(window).on('scroll', showTopDiv);
function showTopDiv() {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 500) {
$("#topDiv").slideDown();
}
}
$(window).on('scroll', function() {
if ($(window).scrollTop() + $(window).height() < $(document).height() - 800) {
$("#topDiv").slideUp();
}
});
$("#closeTop").click(function () {
$("#topDiv").slideUp();
$(window).off('scroll', showTopDiv);
return false;
});
Also, in your slideup function, adding $("#topDiv").is(':visible') to the if statement will make sure it is'nt executed uneccessary.
And is there really a need to bind the click function on every scroll?
Try this:
$("#topDiv").hide();
$(window).addEventListener('scroll', function(event) {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 500) {
$("#topDiv").slideDown();
}
if ($(window).scrollTop() + $(window).height() < $(document).height() - 800) {
$("#topDiv").slideUp();
}
$("#closeTop").click(function () {
$("#topDiv").slideUp();
$(window).removeEventListener('scroll',arguments.callee,false);
});
}