Сделайте div при прокрутке прокрутки определенной точки страницы

Моя цель состоит в том, чтобы фиксированный div отображался в верхней части страницы, когда кто-то прокручивает определенное количество пикселей вниз по странице. Как правило, после того, как раздел заголовка выходит из поля зрения, этот div появится.

Я посмотрел код, похожий на то, что я хочу; однако, не видели ничего, что позволило бы мне легко изменить количество пикселей с верхней части страницы (если возможно).

Вот фрагмент кода, который я видел, когда вы делали divs с помощью прокрутки.

// Get the headers position from the top of the page, plus its own height
var startY = $('header').position().top + $('header').outerHeight();

$(window).scroll(function(){
    checkY();
});

function checkY(){
    if( $(window).scrollTop() > startY ){
        $('.fixedDiv').slideDown();
    }else{
        $('.fixedDiv').slideUp();
    }
}

// Do this on load just in case the user starts half way down the page
checkY();

Я просто хочу знать, как это сделать. Если кто-то знает фрагмент кода уже в такт с помощью слайд-шоу и слайд-анимации, это было бы очень полезно, но не обязательно.

Ответ 1

window.addEventListener("scroll",function() { 
   if(window.scrollY > 500) {
      $('.fixedDiv').slideDown();
   }
   else {
      $('.fixedDiv').slideUp();
   }
},false);

Ответ 2

Брэндон Тилли ответил на мой вопрос в комментарии...

Вы изменили бы первую строку с началом Y, чтобы быть конкретным Y вам нужно, а не вычислять на основе заголовка положение и высоту. Здесь обновленная скрипка: jsfiddle.net/BinaryMuse/Ehney/1

Ответ 3

window.addEventListener("scroll",function() { 
   $('.fixedDiv')[(window.scrollY > 500)?"slideDown":"slideUp"]();
},false);

DEMO: http://jsfiddle.net/DerekL/8eG2A/