Implémentation du code du menu coulissant personnalisé avec barre de défilement en HTML

Le contenu de cet article concerne l'implémentation du code des menus personnalisés en HTML qui glissent avec la barre de défilement. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Donnez un div

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

2. Dans le menu de l'événement, cliquez sur

<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. Faites défiler la souris

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

Recommandations associées :

Analyse du concept de redessin et de redistribution dans le navigateur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!