999在线观看视频,中国女人做爰视频,性高湖久久久久久久久aaaaa

導讀網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立...

網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。

今天將和大家分享一個案例：如何在頁面中固定導航欄，有一定的參考價值，希望對大家學習有所幫助。

在做導航欄時除了用我們熟悉的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>

Image 18.jpg

總結：以上就是本篇文章的全部內容了，希望通過這個案例大家對scrollTop和scrollLeft的應用更加清楚

以上就是如何通過jQuery在頁面中固定導航欄的詳細內容，更多請關注php中文網其它相關文章！

網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。

溫馨提示：喜歡本站的話，請收藏一下本站！

當前位置:雨林木風下載站 > 網頁設計教程 > 詳細頁面

如何通過jQuery在頁面中固定導航欄

本類教程下載

系統下載排行