Code-Implementierung des benutzerdefinierten Schiebemenüs mit Bildlaufleiste in HTML

Der Inhalt dieses Artikels befasst sich mit der Code-Implementierung benutzerdefinierter Menüs in HTML, die mit der Bildlaufleiste versehen sind. Ich hoffe, dass er für Sie hilfreich ist.

1. Geben Sie ein div

    <style>
            #menu{
                position: relative;top: 0px;
            }
    </style>
<div id="menu"> </div>

2. Klicken Sie im Ereignismenü auf

<script>
		function showHide(num){
			if(num==1){
				$(&#39;html, body&#39;).animate({scrollTop: $(&#39;#biaoji1&#39;).offset().top},"slow")//"slow"
			}else if(num==2){
				$(&#39;html, body&#39;).animate({scrollTop: $(&#39;#biaoji2&#39;).offset().top},"slow")
			}else if(num==3){
				$(&#39;html, body&#39;).animate({scrollTop: $(&#39;#biaoji3&#39;).offset().top},"slow")
			}
		}
	</script>

3. Rollen Sie die Maus

<script>
			$(function(){
				window.onscroll=function(){
				var top2=$(document).scrollTop();
				//var top1=document.body.scrollTop;
				console.log("top2:"+top2)
				$("#menu").css("position","relative").css("top",top2);
				}
			});
</script>

Verwandte Empfehlungen:

Konzeptanalyse von Neuzeichnen und Reflow in Browsern

Das obige ist der detaillierte Inhalt vonCode-Implementierung des benutzerdefinierten Schiebemenüs mit Bildlaufleiste in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!