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
WBOYOriginal
2016-05-16 15:13:261609Durchsuche

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> 

2.css

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

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();
});
});

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!

Stellungnahme:
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