2017-09-27 12 views
5

के लिए प्राथमिक स्लाइड एनीमेशन को रोकें, मैंने अपनी नौसेना के लिए दिखने और महसूस करने में कामयाब रहा है, मेरी समस्या यह है कि जब मैं रीफ्रेश करता हूं तो आप पहले राज्य पर एनएवी को स्लाइड करना नहीं चाहते हैं पहली नौसेना स्लाइड असली जल्दी मैं चाहता हूं कि यह साइट के साथ आगे बढ़े, फिर पृष्ठभूमि में स्लाइड के साथ एनएवी स्क्रॉल पर वापस स्लाइड करें लेकिन जिस नौसेना में कोई पृष्ठभूमि नहीं है, मैं बिल्कुल स्लाइड नहीं करना चाहता हूं।माध्यमिक

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>

+0

मुझे रीफ्रेश या स्क्रॉल पर प्रारंभिक नेविगेशन स्लाइडिंग नहीं दिखाई देती है। – Bricky

+0

@ ब्रैकी अगर आप नीचे स्क्रॉल करते हैं तो पारदर्शी नौसेना पर लौटने पर स्क्रॉल करें, यह – Codi

+0

रीफ्रेश पर समान होता है यह मेरे लिए ऐसा नहीं करता है। आप कौन सा ब्राउज़र उपयोग कर रहे हैं? http://www.giphy.com/gifs/xT9IgHyrFYR1I9nBT2 – Bricky

उत्तर

1

मैं इस एक शुरुआत हो सकता है लगता है ...

अपने उदाहरण वेबसाइट के स्रोत कोड को देखते हुए, वहाँ 2 तत्वों, दोनों "शीर्षक" युक्त हैं । मैंने उस विचार को 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>

जब शरीर की .scrollTop 86px, शीर्ष लेख की ऊंचाई तक पहुँच जाता है, काले तय हैडर दिखाता है।

उम्मीद है कि इससे मदद मिलती है। सौभाग्य!

संबंधित मुद्दे