Jquery-анимация на основе прокрутки

Question

Я создаю мобильный сайт, который имеет фиксированную кнопку на каждой стороне экрана. Кнопки должны появляться после прокрутки вниз страницы на 550 пикселей.

Это ссылка на мой сайт: http://www.unf.edu/~n00804716/adv-web/project01/stops/museum.html

Как вы можете видеть, ссылки появляются при загрузке, а затем, когда вы прокручиваете крошечный бит, они исчезают. Затем после 550 пикселей они появляются. Итак, проблема в том, что они загружаются слишком рано, прямо при открытии окна браузера. Лучше всего просматривать эту страницу в браузере шириной менее 640 пикселей, чтобы получить идеальное представление о том, что я пытаюсь создать.

Вот скрипт, который я использую для обеих кнопок:

$(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);
}

Заранее благодарю ребят за помощь!

Answer 1

Скрыть кнопки с .hide(), Вы не можете исчезнуть в то, что уже есть: http://jsfiddle.net/kv7L0c5d/17/

$(document).ready(function () {

    $('button').hide();

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