Слайд прокрутки вниз с помощью JavaScript/jQuery

Question

Я ищу некоторые рекомендации о том, как я могу воссоздать эту функцию. Как вы можете видеть, прокручиваете ли вы изменения прозрачности и заголовок исчезает, когда появляется div внизу. Любые идеи или руководства, которые могут мне помочь? http://davegamache.com/

До сих пор я пробовал только $(window).scroll(function(){…});, где я могу прокрутить вниз до определенного триггера и, например, открыть небольшой div. Думаю, теперь мне нужно играть с непрозрачностью. Любая помощь, пожалуйста?

Answer 1

Вы имеете право идеи, используя $(window).scroll(function(){…});

Вы хотите, чтобы выяснить, Y-координату, в которой вы хотите ДИВ быть невидимым и вычислить непрозрачность DIV от этого. В большинстве случаев я предполагаю, что максимальная Y-координата должна быть такой же, как высота обработанного div. Допустим, наш div 500px в высоту. Если DIV должен быть 0-непрозрачности в Y-координата 500, то при у-координаты 100 непрозрачность должна быть 20% (или .2)

Работы Пример: http://jsfiddle.net/FzNrG/5/

$(window).scroll(function(){ 
    var opacity = 1- ($(window).scrollTop()/$('#theDiv').height()); 
    if (opacity>1) opacity=1; 
    if (opacity<0) opacity=0; 

    //$('#debug').html('ScrollTop:' + $(window).scrollTop() + '<br>Opacity: ' + opacity); 
    $('#theDiv').stop().fadeTo(250, opacity);  
}); 

Answer 2

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

- хорошее начало ... он запускает все, что угодно, когда вы начинаете свиток. например, просто поставьте некоторый .height(); в нем, чтобы прочитать высоту элементов, и если ее ниже или выше некоторого числа, которое вы хотите запустить .animate(); как непрозрачность ... просто поиграйте немного.

Answer 3

хотел бы предложить, чтобы читать исходный код связанной страницы (это хорошо прокомментирован тоже)

function slidingTitle() { 
    //Get scroll position of window 
    windowScroll = $(this).scrollTop(); 

    //Slow scroll of .art-header-inner scroll and fade it out 
    $artHeaderInner.css({ 
     'margin-top' : -(windowScroll/3)+"px", 
     'opacity' : 1-(windowScroll/550) 
    }); 

    //Slowly parallax the background of .art-header 
    $artHeader.css({ 
     'background-position' : 'center ' + (-windowScroll/8)+"px" 
    }); 

    //Fade the .nav out 
    $nav.css({ 
     'opacity' : 1-(windowScroll/400) 
    }); 
}