Das Beispiel in diesem Artikel beschreibt die JQuery-Implementierung der oberen Navigationsanzeige und des versteckten Effektcodes beim Scrollen der Seite. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Der Screenshot des Laufeffekts sieht wie folgt aus:
Der spezifische Code lautet wie folgt:
Einführung in Kerndateien
<script src="js/jquery/1.11.1/jquery.min.js"></script>
HTML erstellen, Margin ist in diesem Div eingebaut, um die Bildlaufleiste anzuzeigen, es hat keine praktische Wirkung.
<div class="top-title">这是顶部导航条</div> <div class="margint"><p>滚动看效果</p><p>滚动看效果</p></div>
CSS schreiben
.top-title {background:#e74c3c;color:white;font-size:24px;padding:5px;text-align:center;position: fixed;left:0;top:0;width:100%;transition: top .5s;}
.hiddened{top: -90px;}
.showed{top:0;z-index: 9999;}
top-title definiert den Übergang: top .5s bezieht sich auf die Änderung des oberen Richtungswerts der Animation innerhalb von .5S. Nach dem Hinzufügen der versteckten Klasse wird der Top-Titel beispielsweise innerhalb von 0,5 Sekunden von 0 auf -90 PX animiert.
JS schreiben
$(function(){
var winHeight = $(document).scrollTop();
$(window).scroll(function() {
var scrollY = $(document).scrollTop();// 获取垂直滚动的距离，即滚动了多少
if (scrollY > 550){ //如果滚动距离大于550px则隐藏，否则删除隐藏类
$('.top-title').addClass('hiddened');
}
else {
$('.top-title').removeClass('hiddened');
}
if (scrollY > winHeight){ //如果没滚动到顶部，删除显示类，否则添加显示类
$('.top-title').removeClass('showed');
}
else {
$('.top-title').addClass('showed');
}
});
});Das Obige ist die Gesamtidee zum Anzeigen und Ausblenden der oberen Navigation beim Scrollen der Seite basierend auf JQuery. Ich hoffe, Sie können dieser Idee folgen, um den Effekt des Anzeigens und Ausblendens der Navigation zu vervollständigen.
