通過jQuery在頁面中固定導(dǎo)航欄的方法-創(chuàng)新互聯(lián)

這篇文章主要介紹通過jQuery在頁面中固定導(dǎo)航欄的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)主營藁城網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,APP應(yīng)用開發(fā),藁城h5小程序定制開發(fā)搭建,藁城網(wǎng)站營銷推廣歡迎藁城等地區(qū)企業(yè)咨詢

在做導(dǎo)航欄時(shí)除了用我們熟悉的html和CSS來布局以外，還需要用到j(luò)Query中scrollTop和scrollLeft知識(shí)，它們主要用于設(shè)置或者獲取垂直滾動(dòng)條的位置，根據(jù)頁面被卷曲的高度來固定導(dǎo)航欄位置，接下來在文章中將和大家詳細(xì)分享。

scrollTop

返回或設(shè)置匹配元素的滾動(dòng)條的垂直位置。

$(selector).scrollTop(offset)

offset ：規(guī)定相對(duì)滾動(dòng)條頂部的偏移，以像素為單位，可以寫也可以不寫

例：獲取頁面被卷曲的高度

$(window).scrollTop();

scrollLeft

返回或設(shè)置匹配元素的滾動(dòng)條的水平位置。

水平位置指的是從其左側(cè)滾動(dòng)過的像素?cái)?shù)，

當(dāng)滾動(dòng)條位于最左側(cè)時(shí)，位置是 0。

$(selector).scrollLeft(position)

position：規(guī)定以像素計(jì)的新位置，可以寫也可以不寫

滾動(dòng)條的水平位置指的是從其左側(cè)滾動(dòng)過的像素?cái)?shù)。當(dāng)滾動(dòng)條位于最左側(cè)時(shí)，位置是 0。

例：獲取頁面被卷曲的寬度

$(window).scrollLeft();

案例分享：固定百度搜索欄

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin:0;

}
.all{
width:100%;
height:2000px;
}
.box{
width:100%;
height:75px;
background-color: #fff;
border: 1px solid #ccc;
position: relative;
}
.sousu-left img{
position: absolute;
top:20.5%;
left:28.45%;
}
.box1{width:536px;
      height: 41px;
      border:1px solid #ccc;
      margin:16px auto;
  }

.sousu-right span{
width:140px;
height:41px;
border:1px solid #ccc;
color:#fff;
background-color:rgb(51,136,255);
text-align: center;
line-height: 41px;
font-size:14px;
position: absolute;
right:28.64%;
top:19.69%;
      }
  .fixed{
   position: fixed;
   left:0;
   top:0;
  }
</style>
</head>
<body>
<div>
<div>
<!-- 定義左邊和右邊兩個(gè)盒子 -->
<div>
<img src="images/logo_top_86d58ae1.png">
<div></div>
</div>
<div>
<span>百度一下</span>
</div>
</div>
</div>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
$(function(){
$(window).scroll(function(){
if($(window).scrollTop()>=$(".box").height())判斷當(dāng)卷曲的高度大于box高度時(shí)給box添加一個(gè)fixed屬性，使它固定在頂部
{
$(".box").addClass("fixed");
}
else{
$(".box").removeClass("fixed");如果小于則移除class屬性
}
})
})
</script>
</body>
</html>

通過jQuery在頁面中固定導(dǎo)航欄的方法

以上是通過jQuery在頁面中固定導(dǎo)航欄的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

文章標(biāo)題：通過jQuery在頁面中固定導(dǎo)航欄的方法-創(chuàng)新互聯(lián)
分享網(wǎng)址：http://muchs.cn/article6/cddcog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、響應(yīng)式網(wǎng)站、標(biāo)簽優(yōu)化、靜態(tài)網(wǎng)站、網(wǎng)站改版、營銷型網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容