Эффект панели слайд-эффекта

Question

Я хотел бы создать панель, которая прокручивается вверх с фиксированным содержимым.

Я хотел бы, чтобы этот эффект: Curtain JS

Я не хочу использовать занавес JS плагин, потому что мне нужно только первый эффект. Чтобы прокрутить первую панель, и когда он исчезнет, ​​будет удален. На самом деле это эффект, который можно сыграть один раз.

Так что я стараюсь это: my test

Но содержание под не зафиксировано.

$(document).ready(function() { 
    var $vertical = $('#vertical'); 

    $(window).scroll(function() { 
     var s = $(this).scrollTop(), 
      d = $(document).height(), 
      c = $(this).height(); 

     scrollPercent = (s/(d - c)); 

     var position = (scrollPercent * ($(document).height() - $vertical.height())); 

     $vertical.css({ 
      'bottom': position 
     }); 
    }); 
}); 

Могу ли я помочь?

Answer 1

Вот рабочая версия: http://jsfiddle.net/1wtaofr2/1/ Js:

$(document).ready(function() { 
    var $vertical = $('#vertical'); 

    $('body').height($('.test').height() + $vertical.height()); 

    $(window).scroll(function() { 
     var s = $(this).scrollTop(), 
      d = $(document).height(), 
      c = $(this).height(); 

     scrollPercent = (s/(d - c)); 

     var position = (scrollPercent * ($(document).height() - $vertical.height())); 

     $vertical.css({ 
      "-webkit-transform":"translateY(-"+ position +"px)" 
     }); 

     if (position > $vertical.height()) { 
      $('.test').css({ 
      position: 'relative', 
      'padding-top': $vertical.height() 
      }) 
     } 

     if (position < $vertical.height()) { 
      $('.test').css({ 
      position: 'fixed', 
      'padding-top': 0 
      }) 
     } 
    }); 
}); 

Css:

body { 
    margin-left: 0; 
} 

#vertical { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    background: red; 
    top: 0; 
    left: 0; 
    bottom: 0; 
} 

.test { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 

В случае, если вы хотите использовать внешнюю библиотеку, может быть, вы найдете scrollr полезным.