Проблема с анимацией 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); 
} 
}) 
})