div内のスライドの削除クラスを追加する

Question

私はスクロール時に絶対位置と固定位置が2つあるヘッダーがあります。スムーズにスライドするためにヘッダーが必要です。スクロールして上にスクロールすると、スライドできます。それをスクロールするだけで表示されます。

(function($) {   
 
    $(document).ready(function(){      
 
     $(window).scroll(function(){       
 
      if ($(this).scrollTop() > 300) { \t \t \t \t 
 
\t \t  \t \t $('.header').addClass('fixed'); 
 
\t   } else { 
 
\t \t \t \t $('.header').removeClass('fixed'); 
 
      } 
 
     }); 
 
    }); 
 
})(jQuery);

.header { 
 
    position: absolute; \t 
 
    width:100%; 
 
    height:86px; 
 
    background: red; 
 
    color: #fff; 
 
} 
 
.header.fixed { 
 
    width:100%; 
 
    height:66px; 
 
    position:fixed; 
 
    top:0px; 
 
    background:#000; 
 
    color: #fff; 
 
    -moz-transform: translateY(-130px); 
 
    -ms-transform: translateY(-130px); 
 
    -webkit-transform: translateY(-130px); 
 
    transform: translateY(-130px); 
 
    transition: transform .5s ease; 
 
} 
 
.header.fixed { 
 
    -moz-transform: translateY(0); 
 
    -ms-transform: translateY(0); 
 
    -webkit-transform: translateY(0); 
 
    transform: translateY(0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div class="header"> 
 
    <span>My Div</span> 
 
    </div> 
 
    <div style="height: 2000px; background-color: grey;">Content</div>

Answer 1

私は解決策に行く前に、それはwidth: 100%よりも絶対要素100% widthを作るためにleft: 0, right: 0を使用することをお勧めします。

に .fixedであなたのスタイルを変更

：したがって、それはあなたの望ましい結果が得られます

.header.fixed { 
    position: fixed; 
    // absolute 100% width 
    left: 0; 
    right: 0; 
    height:66px; 
    background:#000; 
    color: #fff; 
    // the slide animation when fixed class appears 
    animation: headerSlideIn 0.5s ease; 
    animation-fill-mode: forwards; 
    animation-iteration-count: 1; 
} 

// the slide in animation 
@keyframes headerSlideIn { 
    0% { 
    // make it start -66px which is away from your screen 
    top:-66px; 
    } 

    100% { 
    // the key to your animation 
    top: 0; 
    } 
} 

。 topの実装がモバイルでのジャッキーな動作のため、transform: translateY()に置き換えてtop: 0にするだけでいいのが気に入らない場合は、

また、古いコードが機能していない理由は次のとおりです。助け

// you overwritten your style above with 0 which simply doesn't do anything 
.header.fixed { 
    -moz-transform: translateY(0); 
    -ms-transform: translateY(0); 
    -webkit-transform: translateY(0); 
    transform: translateY(0); 
} 

希望。

(function($) {   
 
    $(document).ready(function(){      
 
     $(window).scroll(function(){ 
 
      if ($(this).scrollTop() > 300) 
 
      { 
 
       $('.header').removeClass('slide-back'); 
 
\t \t  \t \t  $('.header').addClass('fixed'); 
 
\t   } 
 
      else if ($(this).scrollTop() == 0) 
 
      { 
 
\t \t \t \t  $('.header').removeClass('fixed'); 
 
      } 
 
     }); 
 
    }); 
 
})(jQuery);

.header { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    height:86px; 
 
    background: red; 
 
    color: #fff; 
 
    transition: all 0.5s ease; 
 
} 
 

 
.header.fixed { 
 
    position: fixed; 
 
    height: 66px; 
 
    background: #000; 
 
    color: #fff; 
 
    animation: headerSlideIn 0.5s ease; 
 
    animation-fill-mode: forwards; 
 
    animation-iteration-count: 1; 
 
} 
 

 
@keyframes headerSlideIn { 
 
    0% { 
 
    top:-66px; 
 
    } 
 
    
 
    100% { 
 
    top: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div class="header"> 
 
    <span>My Div</span> 
 
    </div> 
 
    <div style="height: 2000px; background-color: grey;">Content</div>