CODEWITHSUNDEEP
jqueryanimationscrollfadeinscrolltop
Austin Branham
Austin Branham

Reputation: 173

Scroll based Jquery animation issue

I'm creating a mobile site hat has a fixed button on each side of the screen. The buttons are supposed to appear after scrolling down the page 550 pixels.

This is the link to my site: http://www.unf.edu/~n00804716/adv-web/project01/stops/museum.html

As you can see, the links appear on load up and then when you scroll just the tiniest bit, they disappear. Then, after 550 pixels they appear. So, the issue is that they are loading too soon, right when the browser window is brought up. It is best to view this page at a browser width smaller than 640px to get the ideal experience of what I'm trying to create.

Here is the script I'm using for both buttons:

$(window).scroll(function() {
if ( $(this).scrollTop() < 550) {
    $("button.one").fadeOut(400);
} else {
    $("button.one").fadeIn(400);
}

 $(window).scroll(function() {
if ( $(this).scrollTop() < 550) {
    $("button.two").fadeOut(400);
} else {
    $("button.two").fadeIn(400);
}

Thank you guys in advance for the help!

Upvotes: 0

Views: 55

Answers (1)

Michelangelo
Michelangelo

Reputation: 5948

Hide the buttons with .hide(). You cannot fadeIn something that is already there:http://jsfiddle.net/kv7L0c5d/17/

$(document).ready(function () {

    $('button').hide();

$(window).scroll(function() {
if ( $(this).scrollTop() < 550) {
    $("button").fadeOut(400);
} else {
    $("button").fadeIn(400);
}
})
})

Upvotes: 1

Related Questions