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() });
});
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);
}
});
}
I am using JQuery animate to animate an image down when scrolled 100 or more pixels. Then when I scroll back to the top it needs to go back in original state. Instead of that on the way back it just goes up and down all over again until it finaly stops.
How can I fix that?
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() >= 100) {
//alert('scrolled');
$('.flipje_pas_image').animate({
top: -50
}, 1000);
}
if ($(this).scrollTop() < 100) {
$('.flipje_pas_image').animate({
top: -450
}, 1000);
}
});
});
you need to use a a boolean state that flips when the if condition is met that makes the animation happen once instead eavery scroll event
like this
$(document).ready(function() {
var once = false;
$(window).scroll(function() {
if ($(this).scrollTop() >= 100) {
//alert('scrolled');
if(!once){
once = true
console.log('ssd' , once)
$('.flipje_pas_imag').animate({
top: -50
}, 1000);
}
}
if ($(this).scrollTop() < 100) {
if(once){
once = false;
$('.flipje_pas_imag').animate({
top: -450
}, 1000);
}
}
});
});
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);
});
I want jquery code where I can compare on a parallax page whether a particular div's scrolltop is 0
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 500) {
$('#home').css({position: 'relative'});
$('.home').removeClass('active');
}
else {
$('#home').css({position: 'fixed'});
}
});
How can I modify this code to compare the div is particular div suppose
div id='slide5'.
Is on top
Html
<div id="id1">Semple page 1<div>
<div id="id2">Semple page 2<div>
<div id="id3">Semple page 3<div>
Jquery
$("#id1").bind('scroll', function (event) {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
//Your operation
}
});
$("#id2").bind('scroll', function (event) {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
//Your operation
}
});
$("#id3").bind('scroll', function (event) {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
//Your operation
}
});
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);
});
}