Zatrzymaj animację pierwotnej slajdu tylko podrzędną

Question

Udało mi się uzyskać wygląd i styl, który chcę dla mojej nawigacji, moim problemem jest to, że nie chcę, aby nav przesunął się w pierwszym stanie, gdy odświeżysz, możesz zobaczyć pierwsza nawigacja przesuwa się bardzo szybko Chcę, żeby pojawiła się na stronie, następnie nawigacja ze slajdami tła, a następnie przesuwanie do góry po przewijaniu, ale nawigacja, która nie ma tła Nie chcę w ogóle ślizgać się.

Example

(function($) { 
 
    var header = $('.siteHeader'); 
 

 
    $(window).scroll(function() { 
 
    if ($(this).scrollTop() > 300) { 
 
     header.addClass('fixed active').off('transitionend'); \t \t 
 
    } else if (header.hasClass('active')) { 
 
     header.removeClass('active').one('transitionend', function() { 
 
     header.removeClass('fixed'); 
 
\t \t header.addClass('active'); 
 
     }); 
 
    } 
 
    }).scroll(); 
 

 
})(jQuery); 
 

 
$(window).resize(function() { \t 
 
    $('.siteHeader').addClass('active'); 
 
\t $('.siteHeader').removeClass('fixed'); 
 
}); 
 

 
$(document).ready(function(){ 
 
    $(this).scrollTop(0); 
 
    $('.siteHeader').addClass('active'); 
 
});

.headerNav { 
 
\t height: auto; \t 
 
\t float: right; 
 
\t margin: 0px; 
 
} 
 
.headerNav ul li { 
 
\t display: inline-block; 
 
\t margin-left: 40px; 
 
} 
 

 
.siteHeader { 
 
\t height: 86px; 
 
\t position: absolute; 
 
\t width: 100%; 
 
\t z-index: 11; 
 
\t background-color: red; 
 
\t -webkit-transition: -webkit-transform .3s; 
 
\t transition: transform .3s; 
 
\t -moz-transform: translateY(-86px); 
 
\t -ms-transform: translateY(-86px); 
 
\t -webkit-transform: translateY(-86px); 
 
\t transform: translateY(-86px); 
 
} 
 

 
.siteHeader.fixed { 
 
\t width: 100%; 
 
\t height: 66px; 
 
\t position: fixed; 
 
\t top: 0px; 
 
\t background-color: #000; 
 
\t -moz-transform: translateY(-130px); 
 
\t -ms-transform: translateY(-130px); 
 
\t -webkit-transform: translateY(-130px); 
 
\t transform: translateY(-130px); 
 
\t transition: transform .3s; 
 
} 
 

 
.siteHeader.active { 
 
\t -moz-transform: translateY(0px); 
 
\t -ms-transform: translateY(0px); 
 
\t -webkit-transform: translateY(0px); 
 
\t transform: translateY(0px); 
 
\t transition: transform .3s; 
 
} 
 

 
.siteHeader.fixed.active { 
 
\t -moz-transform: translateY(0px); 
 
\t -ms-transform: translateY(0px); 
 
\t -webkit-transform: translateY(0px); 
 
\t transform: translateY(0px); 
 
\t transition: transform .3s; 
 
} 
 

 
.main{ 
 
background-color: grey; 
 
height: 1500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
\t <div class="siteHeader"> 
 
\t \t <nav class="headerNav"> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><a href="">Link</a></li> 
 
\t \t \t \t <li><a href="">Link</a></li> 
 
\t \t \t \t <li><a href="">Link</a></li> 
 
\t \t \t \t <li><a href="">Link</a></li> 
 
\t \t \t </ul> \t 
 
\t \t </nav> 
 
\t </div> 
 
    
 
    <div class="main">Content</div>

Answer 1

myślę, że może to być początek ...

Patrząc na przykład kodu źródłowego witryny, są 2 elementy, zarówno zawierające "nagłówek" . Powieliłem ten pomysł w this jsfiddle.

(function($) { 
 
    var header = $('.siteHeader'); 
 

 
    $(window).scroll(function() { 
 
    if ($("body").scrollTop() > 86) { 
 
     header.addClass('fixed active').off('transitionend'); 
 
    } else if (header.hasClass('active')) { 
 
     header.removeClass('active').one('transitionend', function() { 
 
     header.removeClass('fixed'); 
 
     header.addClass('active'); 
 
     }); 
 
    } 
 
    }).scroll(); 
 

 
})(jQuery); 
 

 
$(window).resize(function() { 
 
    $('.siteHeader').addClass('active'); 
 
    $('.siteHeader').removeClass('fixed'); 
 
}); 
 

 
$(document).ready(function() { 
 
    $(this).scrollTop(0); 
 
    $('.siteHeader').addClass('active'); 
 
});

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.headerNav { 
 
    height: auto; 
 
    float: right; 
 
    margin: 0px; 
 
} 
 

 
.headerNav ul li { 
 
    display: inline-block; 
 
    margin-left: 40px; 
 
} 
 

 
.siteHeader, 
 
.siteHeaderNoFloat { 
 
    height: 86px; 
 
    top: 0; 
 
    width: 100%; 
 
    background-color: red; 
 
} 
 

 
.siteHeader { 
 
    position: absolute; 
 
    z-index: 11; 
 
    -moz-transform: translateY(-86px); 
 
    -ms-transform: translateY(-86px); 
 
    -webkit-transform: translateY(-86px); 
 
    transform: translateY(-86px); 
 
} 
 

 
.siteHeader.fixed { 
 
    -webkit-transition: -webkit-transform .3s; 
 
    transition: transform .3s; 
 
    width: 100%; 
 
    height: 66px; 
 
    position: fixed; 
 
    top: 0px; 
 
    background-color: #000; 
 
    -moz-transform: translateY(-130px); 
 
    -ms-transform: translateY(-130px); 
 
    -webkit-transform: translateY(-130px); 
 
    transform: translateY(-130px); 
 
    transition: transform .3s; 
 
} 
 

 

 
/*.siteHeader.active { 
 
    -moz-transform: translateY(0px); 
 
    -ms-transform: translateY(0px); 
 
    -webkit-transform: translateY(0px); 
 
    transform: translateY(0px); 
 
    transition: transform .3s; 
 
}*/ 
 

 
.siteHeader.fixed.active { 
 
    -moz-transform: translateY(0px); 
 
    -ms-transform: translateY(0px); 
 
    -webkit-transform: translateY(0px); 
 
    transform: translateY(0px); 
 
    transition: transform .3s; 
 
} 
 

 
.main { 
 
    background-color: grey; 
 
    height: 1500px; 
 
    padding-top: 86px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="siteHeaderNoFloat"> 
 
    <nav class="headerNav"> 
 
    <ul> 
 
     <li><a href="">Link</a></li> 
 
     <li><a href="">Link</a></li> 
 
     <li><a href="">Link</a></li> 
 
     <li><a href="">Link</a></li> 
 
    </ul> 
 
    </nav> 
 
</div> 
 

 
<div class="siteHeader"> 
 
    <nav class="headerNav"> 
 
    <ul> 
 
     <li><a href="">Link</a></li> 
 
     <li><a href="">Link</a></li> 
 
     <li><a href="">Link</a></li> 
 
     <li><a href="">Link</a></li> 
 
    </ul> 
 
    </nav> 
 
</div> 
 

 
<div class="main"> 
 
    Content 
 
</div>

Gdy .scrollTop ciała osiągnie 86px wysokość nagłówka, czarna stała nagłówek pojawi.

Mam nadzieję, że to pomoże. Powodzenia!