1

divがクリックされたときにdivの下部からスライドアップするパネルを作成するには、jquery関数を設定する必要があります。私が現在持っているのはこれです：

    $(function() {

  var open = false;

  $('.header-wrapper').click(function() {

      if(open === false) {
          $('.header-controls').show();
          $('.header-controls').animate({top:'350px', height:'50px'}, 800, function() {
            //callback
          }); 

          $(this).css('backgroundPosition', 'bottom left');

          open = true;

      } else {

          $('.header-controls').animate({top:'400px', height:'0px'}, 800, function() {
            $('.header-controls').hide(); 
          }); 
          $(this).css('backgroundPosition', 'top left');

          open = false;

      }

  });     

});

残念ながら、これはスライド パネルが position: fixed に設定されている場合にのみ機能します。これは、ページがスクロールするとすぐに、パネル (開いている場合) がオフになることを意味します。同じことを設定するにはどうすればよいですか?ただし、パネルが関連する div にとどまるようにしますか?

これが現在どのように機能しているかを示す簡単な jsfiddle です: http://jsfiddle.net/nAX43/5/ (画像をクリックしてから下にスクロールして問題を確認してください)...

乾杯！

4

1 に答える 1

1

position: absolute以下のクラスに変更すると正常に動作しますが、

.header-controls {
    position: absolute;
    top:400px;
    width: 100%;
    height:0;
    background-color:rgba(42, 42, 42, 0.5);
    color:#ccc;
    z-index: 5000;
    display:none;
}

デモを参照してください。http://jsfiddle.net/nAX43/7/

于 2012-08-22T11:05:02.700 に答える