Dừng Hoạt ảnh chiếu chính chỉ cho phụ

Question

Tôi đã quản lý để có được giao diện mà tôi muốn cho điều hướng của mình, vấn đề của tôi là khi tôi không muốn nav trượt lên trên trạng thái đầu tiên khi bạn làm mới, bạn có thể thấy đầu tiên nav slide thật nhanh Tôi muốn nó đi lên với trang web sau đó nav với một slide nền sau đó trượt trở lại trên di chuyển nhưng nav mà không có nền tôi không muốn trượt ở tất cả.

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

Tôi nghĩ rằng đây có thể là một sự khởi đầu ...

Nhìn vào ví dụ mã nguồn trang web của bạn, có 2 yếu tố, cả hai đều có chứa các "tiêu đề" . Tôi đã nhân rộng ý tưởng đó trong 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>

Khi .scrollTop của cơ thể đạt 86px, chiều cao của tiêu đề, tiêu đề cố định màu đen xuất hiện.

Hy vọng điều này sẽ hữu ích. Chúc may mắn!