HTML에서 스크롤 막대를 사용하여 슬라이딩하는 사용자 정의 메뉴의 코드 구현

이 기사의 내용은 스크롤 막대를 사용하여 슬라이드하는 HTML의 사용자 정의 메뉴에 대한 코드입니다. 필요한 친구가 참고할 수 있기를 바랍니다.

1. div 제공

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

2. 이벤트 메뉴에서

<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, 스크롤 마우스

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

관련 추천:

브라우저에서 다시 그리기 및 리플로우에 대한 개념 분석# 🎜 🎜#

위 내용은 HTML에서 스크롤 막대를 사용하여 슬라이딩하는 사용자 정의 메뉴의 코드 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!