के लिए प्राथमिक स्लाइड एनीमेशन को रोकें, मैंने अपनी नौसेना के लिए दिखने और महसूस करने में कामयाब रहा है, मेरी समस्या यह है कि जब मैं रीफ्रेश करता हूं तो आप पहले राज्य पर एनएवी को स्लाइड करना नहीं चाहते हैं पहली नौसेना स्लाइड असली जल्दी मैं चाहता हूं कि यह साइट के साथ आगे बढ़े, फिर पृष्ठभूमि में स्लाइड के साथ एनएवी स्क्रॉल पर वापस स्लाइड करें लेकिन जिस नौसेना में कोई पृष्ठभूमि नहीं है, मैं बिल्कुल स्लाइड नहीं करना चाहता हूं।माध्यमिक
(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>
मुझे रीफ्रेश या स्क्रॉल पर प्रारंभिक नेविगेशन स्लाइडिंग नहीं दिखाई देती है। – Bricky
@ ब्रैकी अगर आप नीचे स्क्रॉल करते हैं तो पारदर्शी नौसेना पर लौटने पर स्क्रॉल करें, यह – Codi
रीफ्रेश पर समान होता है यह मेरे लिए ऐसा नहीं करता है। आप कौन सा ब्राउज़र उपयोग कर रहे हैं? http://www.giphy.com/gifs/xT9IgHyrFYR1I9nBT2 – Bricky