如何透過jQuery在頁面中固定導覽列
- 清浅原創
- 2018-11-23 17:55:273433瀏覽
今天將和大家分享一個案例：如何在頁面中固定導覽欄，有一定的參考價值，希望對大家學習有所幫助。
在做導覽列時除了用我們熟悉的html和CSS來佈局以外，還需要用到jQuery中scrollTop和scrollLeft知識，它們主要用於設定或取得垂直滾動條的位置，根據頁面被捲曲的高度來固定導覽列位置，接下來在文章中將和大家詳細分享。
scrollTop
傳回或設定符合元素的捲軸的垂直位置。
$(selector).scrollTop(offset)
offset ： 規定相對捲軸頂部的偏移，以像素為單位，可以寫入也可以不寫
範例： 取得頁面被捲曲的高度
$(window).scrollTop();
scrollLeft
傳回或設定符合元素的捲軸的水平位置。
水平位置指的是從其左側滾動過的像素數，
當捲軸位於最左側時，位置是 0。
$(selector).scrollLeft(position)
position：規定以像素計的新位置，可以寫也可以不寫
滾動條的水平位置指的是從其左側滾動過的像素數。當捲軸位於最左側時，位置是 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>
<!-- 定义左边和右边两个盒子 -->
<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())判断当卷曲的高度大于box高度时给box添加一个fixed属性，使它固定在顶部
{
$(".box").addClass("fixed");
}
else{
$(".box").removeClass("fixed");如果小于则移除class属性
}
})
})
</script>
</body>
</html>
總結：以上就是這篇文章的全部內容了，希望透過這個案例大家對scrollTop和scrollLeft的應用更加清楚
以上是如何透過jQuery在頁面中固定導覽列的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn