Heim > Web-Frontend > js-Tutorial > JS implementiert Elemente mit fester Position zum Anzeigen/Ausblenden von Fenstern als Seitenscrolls_javascript-Fähigkeiten

JS implementiert Elemente mit fester Position zum Anzeigen/Ausblenden von Fenstern als Seitenscrolls_javascript-Fähigkeiten

WBOY
Freigeben: 2016-05-16 15:13:26
Original
1608 Leute haben es durchsucht

Das Element wird an einer festen Position im Fenster angezeigt und die Seite wird nach unten gescrollt, wenn die Seitenposition kleiner als eine bestimmte Höhe ist Wird nach oben gescrollt, wird das Element ausgeblendet.

Lassen Sie mich Ihnen zuerst die Renderings zeigen:

1.html

<p id="selected-case-count"><span class='form-control'>已选: <span class="casecount">0</span></span></p> 
Nach dem Login kopieren

2.css

p#selected-case-count{
position:fixed; /*固定元素位置*/
top:2px; /*距顶端举例*/
right:40px; /*距右侧位置*/
color:red; 
}
Nach dem Login kopieren

3.js

$(function() {
$("#selected-case-count").hide();
});
var preTop=0;
var currTop=0;
$(function () {
$(window).scroll(function(){
currTop=$(window).scrollTop();
if(currTop<preTop){
$("#selected-case-count").fadeOut(200);
}elseif ($(window).scrollTop()>600){
$("#selected-case-count").fadeIn(500);
}else{
$("#selected-case-count").fadeOut(500);
}
preTop=$(window).scrollTop();
});
});
Nach dem Login kopieren

Das Obige ist das Wissen, das der Herausgeber mit Ihnen über die JS-Implementierung des Anzeigens/Ausblendens von Elementen mit fester Position in Fenstern beim Scrollen der Seite geteilt hat. Ich hoffe, es wird hilfreich sein!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage