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);
}
}
});
});
Related
I have a onClick function that works to move boxes on and off the webpage when the screen is clicked. I'm trying to convert this code so that the movement will happen automatically every four seconds. The problem is that the timeout event most likely needs to be happening inside the main function, because of the functions already repetitive nature, and that's where I'm stuck.
This is the working code:
<script>
$('.box').click(function() {
$('.box').each( function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
}
});
$(this).animate({
left: '-56%'
}, 500);
if ($(this).next().size() > 0) {
$(this).next().animate({
left: '50%'
}, 500);
} else {
$(this).prevAll().last().animate({
left: '50%'
}, 500);
}
});
</script>
And this is what I've tried for the timeout:
<script>
window.onload = function(){
setTimeout(boxMove, 1000);
};
function boxMove() {
$('.box').each( function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
}
});
$(this).animate({
left: '-56%'
}, 500);
if ($(this).next().size() > 0) {
$(this).next().animate({
left: '50%'
}, 500);
} else {
$(this).prevAll().last().animate({
left: '50%'
}, 500);
}
}
</script>
To make sure I am understanding correctly, you no longer want the click to clear this box, but rather want it to clear automatically 4 seconds after the page loads.
Your code is close, it just looks like you missed some closing brackets when converting the code. Try this:
window.onload = function(){
setTimeout(boxMove, 1000);
};
function boxMove() {
$('.box').each( function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
}
$(this).animate({
left: '-56%'
}, 500);
if ($(this).next().size() > 0) {
$(this).next().animate({
left: '50%'
}, 500);
} else {
$(this).prevAll().last().animate({
left: '50%'
}, 500);
}
});
}
Assumptions:
Your DOM manipulation with jQuery was functioning as you expect it
to now prior to converting to a timeout.
You only need to clear these boxes once and they never return. If they do return and you want to clear them every 4 seconds regularly, change setTimeout to setInterval.
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 would like to execute the below code when user scrolls to a certain position on the page; for instance 600px; down (from the top). So detect 600px down in PIXELS.
// $(document).ready(function() {
$(".slidedown").one('load', function () {
$(this).slideDown(200);
}).each(function() {
if(this.complete) $(this).trigger('load');
});
// });
This did not work:
$(document).scroll(function(){
if (document.scrollHeight > 600) {
$(".slidedown").one('load', function () {
$(this).slideDown(200);
}).each(function() {
if(this.complete) $(this).trigger('load');
});
}
});
simply set your threshold of # of pixels before you fire event and this function will be triggered when the user scrolls up or down by n pixels
https://jsfiddle.net/7daffjh8/7/
var scrollAmount = 0;
var pixelsToNotify = 200;
$(document).scroll(function() {
var distance = $(window).scrollTop();
console.log(distance, scrollAmount);
if(distance - scrollAmount > pixelsToNotify){
alert('user scrolled down event');
scrollAmount = distance;
}
if(distance < scrollAmount - pixelsToNotify){
alert('user scrolled up event');
scrollAmount = distance;
}
});
I think something like this will work
$(document).scroll(function(){
if ($(document).scrollTop() > 600) {
... execute code
}
});
https://jsfiddle.net/ga7140L9/1/
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 make a feature like the one on this page. B&O BeoPlay A3
When you scroll down it automatically scrolls all the way to the next page.
I have been playing around with window.pageYOffset.
I have this so far:
window.onscroll = scroll;
function scroll () {
setTimeout(function() {
if (window.pageYOffset < 100 && window.pageYOffset > 2) {
scrollLogin();
}
else if (window.pageYOffset > 100 && window.pageYOffset < 159 && window.pageYOffset != 124) {
scrollSky();
}
else if (window.pageYOffset > 159 && window.pageYOffset < 248) {
scrollCity();
}
},500);
}
function scrollLogin() {
$('html,body').animate({
scrollTop: $("#login").offset().top
}, 500);
}
function scrollSky() {
$('html,body').animate({
scrollTop: $("#skyContainer").offset().top
}, 500);
}
function scrollCity() {
$('html,body').animate({
scrollTop: $("#city").offset().top
}, 500);
}
The problem is that this way is not working seamless at all. I have to wait 500ms until I scroll again. And if this also only works with a fixed screen resolution.
Do you know a better way do archive this feature? That also allows percentage measures so that it works on different resolution monitors?
Link to my attempt.
So I want 3 states that the viewport sticks to: top (the login bar), middle (the sky animation) and bottom (the search bar).
Thank you very much!
EDIT:
TAKE 2:
I made a variable that tells me if the animation is ended. It is simply has the value as '1' while the animation is on, this prevents all sorts of chaos.
So I have the script working pretty well now. The only catch is that it only works with exactly my innerHeight and innerWidth. (innerHeight: 863 - innerWidth: 1440).
Is there a way to make window.pageYOffset in percentages?
And is this the best way to archive this effect?
Thank you, have a nice day.
This is my new code:
window.onscroll = scroll;
var animationIsOn = 0;
function scroll () {
if (animationIsOn == 0) {
var pageY = window.pageYOffset;
if (pageY < 119 && pageY > 69) {
scrollLogin();
}
else if (pageY > 5 && pageY < 69 || pageY > 179 && pageY < 254) {
scrollSky();
}
else if (pageY > 129 && pageY < 179) {
scrollCity();
}
}
}
function scrollLogin() {
animationIsOn = 1;
$('html,body').animate({
scrollTop: $("#login").offset().top
}, 500, function() {
animationIsOn = 0;
});
}
function scrollSky() {
animationIsOn = 1;
$('html,body').animate({
scrollTop: $("#skyContainer").offset().top
}, 500, function() {
animationIsOn = 0;
});
}
function scrollCity() {
animationIsOn = 1;
$('html,body').animate({
scrollTop: $("#city").offset().top-600
}, 500, function() {
animationIsOn = 0;
});
}
To get pageYOffset as a percentage, simply divide pageYOffset by document.documentElement.scrollHeight and multiply by a 100.
EDIT: Ckrill has found that he needed to use window.innerHeight and not the document's scrollHeight property.