Das Beispiel in diesem Artikel beschreibt die JS-Implementierung des Bildschirm-Scroll-Effekts oben auf einigen festen HTML-Seiten. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Solche Spezialeffekte sehen wir oft auf Taobao. Die Produktliste ist extrem lang, aber der Name der Produktspalte steht immer ganz oben. Wenn Sie die Bildlaufleiste nach oben scrollen, erkennt sie automatisch, ob sie oben angekommen ist, und hält sie dann oben, damit sie nicht blockiert wird.
Dieser Spezialeffekt wird über JavaScript und CSS implementiert und hat viele Verwendungsmöglichkeiten in der tatsächlichen Entwicklung. Das Folgende ist der Quellcode, den ich mithilfe von JavaScript gefunden habe, um Taobao Smart Floating zu imitieren. Er ist gut kompatibel und kann in IE, Firefox usw. verwendet werden. Unter Chrome funktioniert alles einwandfrei.
Bei der Verwendung dieses Spezialeffektcodes müssen Sie darauf achten, dass die Spalten in der Seitenleiste nicht dynamisch geladen werden können und ansonsten ein statisches Format haben müssen wird die Seitenhöhe falsch berechnen und es kommt zu einer Verschiebung nach oben und unten.
JavaScript-Code:
(function(){
var oDiv=document.getElementById("float");
var H=0,iE6;
var Y=oDiv;
while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
iE6=window.ActiveXObject&&!window.XMLHttpRequest;
if(!iE6){
window.onscroll=function()
{
var s=document.body.scrollTop||document.documentElement.scrollTop;
if(s>H){oDiv.className="div1 div2";if(iE6){oDiv.style.top=(s-H)+"px";}}
else{oDiv.className="div1";}
};
}
})();
HTML-Code:
<div id="box">
<div id="float" class="div1">
//随滚动移动的部分代码
</div>
</div>
CSS-Code:
#box{float:left;position:relative;width:295px;}
.div1{}
.div2{position:fixed;_position:absolute;top:3px;z-index:295;}
Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.
