Hinzufügen entfernen Klasse für Folie in div

Question

Ich habe eine Kopfzeile, die 2 Positionen 1 absolut und fixiert, wenn Sie blättern muss ich die Kopfzeile, um reibungslos einschieben und wenn Sie zurück nach oben scrollen wird es herausgleiten .. Ich kann nicht bekommen es zu schieben es nur beim Scrollen nach oben und aus.

(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

Bevor ich zu der Lösung gehen, ist es besser, left: 0, right: 0 zu verwenden, um absolute Elemente 100% width als width: 100% zu machen.

Ihre Stile auf .fixed ändern:

.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; 
    } 
} 

So wird es Ihnen das gewünschte Ergebnis. Wenn Sie nicht möchten, top Implementierung wegen seiner ruckartigen Verhalten auf Handy einfach ersetzen Sie es mit transform: translateY() und machen Sie es top: 0.

auch der Grund, warum der alte Code nicht funktioniert ist:

// 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); 
} 

Hoffnung, das hilft.

(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>