I am trying to recreate the effect seen here: http://jsfiddle.net/surendraVsingh/aATHd/2/
But I am trying to animate the height. For some reason, it works fine when I scroll down, but upon scrolling up, the height doesn't change back to normal. Any ideas?
Here is what I have now: http://justinledelson.com/new/
$(window).scroll(function(){
if ($(this).scrollTop() > 250){
$('#header').animate({"height":"100px"}, 1500);
}
else{
$('#header').animate({"height":"470px"}, 1);
}
});
Thanks!
Although I said that this wasn't a solution for your problem, it seems that it's actually a solution.
Add a class after each action. Something like expanded and collapsed for each situation, and check if that class is present before doing the animation. That way the animations won't trigger until it's necessary.
This avoids triggering the animation multiple times queuing the animation. That's why if you scrolled down a lot of times and scrolled back to top, the "expanding" animation triggered long after you scrolled up (it had to wait that each "collapsing" animation ended)
My test was:
$(window).scroll(function(){
var $header = $('#header');
if ($(this).scrollTop() > 50){ // x should be from where you want this to happen from top//
if (!$header.hasClass('collapsed')) {
$header.animate({"height":"100px"}, 1500, function() {
$header.toggleClass('expanded collapsed');
});
}
}
else{
if (!$header.hasClass('expanded')) {
$header.animate({"height":"470px"}, 1, function() {
$header.toggleClass('expanded collapsed');
});
}
}
});
header should start with expanded class
Related
I am using Jquery to create an effect that will change things as the user scrolls
$(function() {
var headerPosition = $(".home-header");
$(window)
.scroll(function() {
var scroll = $(window)
.scrollTop();
if (scroll >= 200) {
headerPosition.addClass("home-header-color");
} else if (scroll <= 600) {
headerPosition.removeClass("home-header-color");
}
});
});
This is what i'm using a simple add remove class function that gets triggered on a certain scroll amount.
What I want to do is to make it as a user scrolls once no matter how fast.
This is what I came up with but dose not work well scrolling up.
Codepen
I want it to only appear when you reach the top of the screen when scrolling up. Not on just one scroll up.
I tried combining the two but it didn't work out well.
I need help, my navbar is transparent background, so when I do scroll > 540px the navbar turns black, but when the scrolling is > 540px and updated the page the navbar becomes transparent until I make a minimum scroll, how can I fix the problem?
$(window).on('scroll', function() {
if ($(this).scrollTop() > 540) {
$('.sec').addClass('navbar-index-scroll animated fadeInDown').removeClass('fadeOutUp');
} else {
$('.sec').removeClass('fadeInDown').addClass('fadeOutUp');
}
});
When you navigate the website, say using refresh or history (Back/Forward) buttons, the old scroll state can be remembered by the browser.
To compensate for the page being already scrolled you can:
// 1. Create a function to handle the navbar states/styles
function navbarScrollposStyles() {
if($(window).scrollTop() > 540) {
$('.sec').addClass('navbar-index-scroll animated fadeInDown').removeClass('fadeOutUp');
} else {
$('.sec').removeClass('fadeInDown').addClass('fadeOutUp');
}
}
$(navbarScrollposStyles); // 2. Do on DOM ready and
$(window).on('load scroll', navbarScrollposStyles); // 3. on window.onload and onscroll
P.S: in your specific code I cannot make sense of the classes navbar-index-scroll animated not being handled properly in the else block, …but that's another pair of shoes.
Additionally it's really expensive to query the document on every scroll "tick" (event) for some .sec elements. You should cache your selectors into a variable like var $sec = $(".sec"); -
also you could prevent such event from being fired too much times and degrade performance - by using some Throttle function.
I have it set to a div's width increases when I scroll past it with the following code. Now I do this same thing except with .fadeIn() and it works fine. But when I use the .animate() i'll scroll to that location and nothing will happen, but like randomly 30-40 seconds later it will just decide to animate without me even touching/moving anything. Any reason why that is?
HTML
<div>
2500px of CONTENT
</div>
<div class="statbar"></div>
CSS
.statbar {
width:100px;
height:30px;
background-color:#ff4200;
}
jQuery
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 2500) {
$('.statbar').animate({width:'200px'}, 300);
} else {
$('.statbar').animate({width:'10px'}, 300);
}
});
Here's a JSFiddle example: https://jsfiddle.net/kr4yeyw3/2/
If you wait like 30 seconds at the div, you'll see the animation will take place (need it to happen instantly like the fadeIn() does.
EDIT: It works when I change those 300 to zeros, but it doesn't animate! Just changes width instantly without "sliding" it over.
EDIT2: Finally figured it out for anyone who one day scrolls across this page looking for a similar answer.
Adding clearQueue(), stop() and easing seemed to do the trick
$('.statbar').clearQueue().stop().animate({width:'75%'}, { "duration": 400, "easing": "linear" });
clearQueue or Stop will do fix the animation, but it doesn't address the real problem with your code. In your else statement, which is hit like 2000 times as you scroll to the bottom of the page, you are starting an animation with a duration of 400 milliseconds.
jQuery animate puts all animations into a queue and calls them one after the other so it creates a huge delay before the animation you actually want to see. api.jquery.com/animate/
Here's how I think you should rework your code:
var isExpanded = false;
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 2500) {
$('.statbar').animate({width:'200px'}, 300);
isExpanded = true;
} else if(isExpanded) {
$('.statbar').animate({width:'10px'}, 300);
isExpanded = false;
}
});
Here I use a flag to determine if the animation needs to be run and just toggle it as we switch display modes.
I'm trying to make my simple "scroll back to the top" image appear and disappear based on how far away from the top of the page you are. For the sake of example, let's say 100 pixels away from the top.
Here's what I have. It seems to work on scroll down, the image div fades in.
When I scroll back to the top, the div doesn't fadeOut. Any tips?
$(window).scroll(function() {
if ($(this).scrollTop()>100)
{
$('#toTop').fadeIn();
}
else
{
$('.#toTop').fadeOut();
}
});
I think you've a typo in your code: $('.#toTop').fadeOut(); should be $('#toTop').fadeOut();
Update
Just a simple improvement. To prevent the element be faded all the time you scroll, check if it was already faded earlier:
var $toTop = $('#toTop');
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$toTop.fadeIn();
} else if ($toTop.is(':visible')) {
$toTop.fadeOut();
}
});
The following code, will make the "Go to top" button fade in when the scrollTop() is over 400px, that works fine, but i haven't found a way to make it fade out when i go back to the top.
$("#gototop").css("opacity", "0");
$(window).bind('scroll', function(){
if($(this).scrollTop() > 400) {
$("#gototop").animate({
opacity: 100,
}, 3400);
}
});
An else after the if didn't help, i tried different options with my non-ninja skills but none worked. Any ideas on how to make it fade out when the scroll is back at the top?
Thanks.
Something along the lines of either an additional scroll handler that does the opposite or another if inside your first handler should do it (you want to test if scrollTop() < 400.
$(window).bind('scroll', function(){
if($(this).scrollTop() < 400) {
$("#gototop").animate({
opacity: 0,
}, 3400);
}
});
Note though, that this is animating it on every call to the scroll event, you probably only want to do it once (when the scroll passes the 400px threshold) so maybe add a variable to record the current state of #gototop.
if(visible && $(this).scrollTop() < 400) {
visible = !visible;
//animate
}
I ended up using a plugin called waypoints to handle the scroll position.