Code implementation of custom menu sliding with scroll bar in html

The content of this article is about the code implementation of custom menus in HTML that slide with the scroll bar. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Give a div

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

2. In the event menu, click

<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. Roll the mouse

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

Related recommendations:

Concept analysis of redrawing and reflow in browsers

The above is the detailed content of Code implementation of custom menu sliding with scroll bar in html. For more information, please follow other related articles on the PHP Chinese website!