html中自定義菜單隨著滾動(dòng)條滑動(dòng)的代碼完成
發(fā)表時(shí)間：2023-09-04 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于html中自定義菜單隨著滾動(dòng)條滑動(dòng)的代碼實(shí)現(xiàn) ，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。1、給一個(gè)div <style>#menu{position: relative;top: 0px;}</style>
<...
本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于html中自定義菜單隨著滾動(dòng)條滑動(dòng)的代碼實(shí)現(xiàn) ，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。
1、給一個(gè)div
<style>
#menu{
position: relative;top: 0px;
}
</style>
<div id="menu"> </div>2、事件菜單，點(diǎn)擊
<script>
function showHide(num){
if(num==1){
$('html, body').animate({scrollTop: $('#biaoji1').offset().top},"slow")//"slow"
}else if(num==2){
$('html, body').animate({scrollTop: $('#biaoji2').offset().top},"slow")
}else if(num==3){
$('html, body').animate({scrollTop: $('#biaoji3').offset().top},"slow")
}
}
</script>3、滾動(dòng)鼠標(biāo)
<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> 相關(guān)推薦：
瀏覽器中重繪以及回流的概念解析
以上就是html中自定義菜單隨著滾動(dòng)條滑動(dòng)的代碼實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
