JQuery Animation with ScrollTop - javascript

Hello Stackoverflow people!
I am having some trouble in JavaScript since I've been experiementing a little with different things something I've had a lot of trouble with is the following:
$(document).scroll(function () {
$('.header').toggleClass('scrolled', $(this).scrollTop() > 1);
});
This works fine, but I want to add an "animation" to it where it fades in when I scroll down on my page, and fades out when I scroll to the top of my page.
The class "Scrolled" is what I want to fade in and out.
Somebody that might be able to help me with this?

Related

Run jQuery/Javascript Function w/GSAP only once?

I have a function that scrolls down/snaps to a div after the user starts to scroll (to avoid them having to manually scroll down to where the main content starts). I have used some GSAP to achieve this, however I don't think that will make much difference with the solution to this problem. However, while this function does exactly what I'd like, It won't then allow the user to scroll back up. It just glitches a little bit, as if I'm fighting with the function to scroll back up. I've tried a variety of answers from all the "run only once questions" on here, but none seem to work in this situation.
I want to basically kill the function after the first time it is initiated, or to tweak the function to only work on the first scroll at the top of the page (though I appreciate this would be much more complicated).
Thank you in advance of any help.
JS:
$(window).scroll(function () {
function headScrollToDiv() {
var dHeight = $(window).height();
if (dHeight >= $(this).scrollTop()) {
gsap.to(window, 0.4, { scrollTo: ".buffer" });
}
}
headScrollToDiv();
});

Smoothscroll bounces up and down on different anchors

I have this problem with smooth scrolling on my website, where the script scrolls down to the <div>, but if you click the same <div> or any other <div>, it doesn't seem to understand where the next <div> is. Instead, it'll just bounce up and down around the same kind of area it was just at.
This is the website in question.
The script I'm using:
jQuery(document).ready(function() {
jQuery('a[href^="#"]').click(function(e) {
jQuery('#main').animate(
{
scrollTop: jQuery(this.hash).offset().top - 50
}, 1000);
return false;
e.preventDefault();
});
});
This will work fine only if I click the link when I'm at the top of the page, but won't work at all if it's from one link straight to the other.
Could someone have a look at the website and attempt to fix this please? As I'm a little out my depth with JavaScript.
Thank you.

scrollTo a specific div on long scrolling page when page loads

i have a long scrolling page with lots of divs, one below the other. i would like to scroll automatically when you visit (or reload) the site to scroll from top to a specific div near of the bottom. to jump there isnt a problem, but i want the "scroll" effect. ive checked out scrollTo() but i dont get it to work.
my first attempt was something like
$(document).ready(function () {
$.scrollTo('#div5'); });
but it doesnt fire anything. a little bit help needed :)
thanks
Try this:
$('html, body').animate({
scrollTop: $('#div5').offset().top
}, 500);
http://jsfiddle.net/nTwLm/2/

How to slowly move header while user scrolls the page?

I want to achieve the effect that is used on this Header on this example website:
http://anchorage-theme.pixelunion.net/
You will notice that as you scroll the page, the header slowly moves upward until it disappears from view. I want to achieve this same effect. I believe it will need some JS and CSS positioning but still have no clue how to achieve this. Is this done with parallax scrolling?
Would appreciate if someone could give me a quick example of the code used to do this with a element. So I can then use it on my own site.
Cheers.
the $(window).scroll(function () {...}) is the one you need here
$(document).scrollTop() is the amount of scrolled distance from the top
Use this:
$(window).scroll(function(){
if ($(this).scrollTop() > x){ // x should be from where you want this to happen from top//
//make CSS changes here
}
else{
//back to default styles
}
});

Animate a div after scrolling away from the top of the webpage

I'm currently trying to make a div appear from behind another div after the user scrolls away from the top of the page.
I'm hoping to do this using animate so that it slides out. Like this...
http://jsfiddle.net/xaYTt/99/
But I can't figure out how to make the red box stay behind the blue box until the user scrolls away from the top of the page.
I also need to reverse this when the user scrolls back up to the top of the page, so the red box slides back under the blue box again.
Can anyone help me out?
This is not the most elegant solution, but it works nonetheless.
http://jsfiddle.net/37LZ5/
Components:
Use $(document).scroll as a trigger to know when scrolling
Use scrollTop() to know how far we're scrolling (0 = top)
Remember state to make sure animation doesn't get triggered a zillion times (var away)
Use .stop() to prevent weird behaviour when halfway through one animation, another animation gets triggered
I think you are looking for this take a look at this demo
Working demo
Code
$(document).ready(function(){
//$('#bottom-box').animate({'margin-top': '200px'}, 1500);
$('body').hover(function(){
$('#bottom-box').animate({'margin-top': '200px'}, 1500);
}, function(){
$('#bottom-box').animate({'margin-top': '50px'}, 1500);
});
});
If my understanding about your question is correct, this is what you are looking for
Since you said, "User scrolls away from the top of the page", I added a div to be at the top of the page.
var isAlreadyOut=false;
$("#divPageTop").mouseover(function(){
if( isAlreadyOut==true)
{
$('#bottom-box').animate({'margin-top': '60px'}, 1500);
isAlreadyOut=false;
}
else
{
$('#bottom-box').animate({'margin-top': '200px'}, 1500);
isAlreadyOut=true;
}
});
Here is the jsfiddle version
http://jsfiddle.net/xaYTt/103/
I did something with jsFiddle that might be what you are after, if I understood your question correctly.
Basically, the red box will animate when you scroll the window more than the distance of the blue box.
Not 100%, just a quick mock up to see if that's what you want.
(When you scroll, click on the scroll bar arrows for more accurate results)
Demo here: http://jsfiddle.net/peduarte/xaYTt/104/

Categories

Resources