欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS 實(shí)現(xiàn)導(dǎo)航欄懸停效果(續(xù)2)

 更新時(shí)間：2013年09月24日 16:07:30   作者：  
發(fā)現(xiàn)原來的方法還有是有幾個(gè)問題：首先Js代碼冗余，導(dǎo)航條上的Tab是用js實(shí)現(xiàn)跳轉(zhuǎn)而不是超鏈接，還有導(dǎo)航條本身用fixed定位，但沒有被設(shè)置為水平居中，而是在JS中更改left值使其居中
【JS-實(shí)現(xiàn)導(dǎo)航欄懸停】
【JS-實(shí)現(xiàn)導(dǎo)航欄懸停（續(xù)）】

用Jquery重新寫完這個(gè)頁面之后，發(fā)現(xiàn)原來的方法還有是有幾個(gè)問題：

1.首先Js代碼冗余，導(dǎo)航條上的Tab是用js實(shí)現(xiàn)跳轉(zhuǎn)而不是超鏈接；

2.還有導(dǎo)航條本身用fixed定位，但沒有被設(shè)置為水平居中，而是在JS中更改left值使其居中。

問題2就導(dǎo)致了，當(dāng)瀏覽器窗口尺寸發(fā)生變化的時(shí)候，瀏覽器中的div的位置都發(fā)生了變化，也就導(dǎo)致了沒法通過頁面中的div動態(tài)的給已fixed定位的導(dǎo)航條來定位。

最終的代碼更改如下：

test.html
復(fù)制代碼 代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
<link rel="stylesheet" type="text/css" href="test.css"></link>
<title>Test</title>
</head>
<body>
<div id="main_div" class="main">
<div id="content_div1" class="content">1</div>
<div id="nav" class="navigation">
<a href="#content_div3"><div id="tab_div1" class="tab">tab1</div></a>
<a href="#content_div4"><div id="tab_div2" class="tab">tab2</div></a>
<a href="#content_div5"><div id="tab_div3" class="tab">tab3</div></a>
<a href="#content_div6"><div id="tab_div4" class="tab">tab4</div></a>
</div>
<div id="content_div2" class="content">2</div>
<div id="content_div3" class="content">3</div>
<div id="content_div4" class="content">4</div>
<div id="content_div5" class="content">5</div>
<div id="content_div6" class="content">6</div>
<div id="content_div7" class="content">7</div>
</div>
</body>
</html>

test.js
復(fù)制代碼 代碼如下:

//記錄導(dǎo)航條原來在頁面上的位置
var naviga_offsetTop = 0;

//使導(dǎo)航條，懸停在頂部
function naviga_stay_top(){
//獲取滾動距離
var scrollTop = $(document).scrollTop();
//如果向下滾動的距離大于原來導(dǎo)航欄離頂部的距離
//直接將導(dǎo)航欄固定到可視區(qū)頂部
if( scrollTop > naviga_offsetTop ){
$("#nav").css({"top": "0px"});
} else {
//如果向下滾動的距離小原來導(dǎo)航欄離頂部的距離，則重新計(jì)算導(dǎo)航欄的位置
$("#nav").css({"top": naviga_offsetTop - scrollTop + "px"});
}
}

function onload_function(){
//記錄初始狀態(tài)導(dǎo)航欄的高度
naviga_offsetTop = $("#nav").attr("offsetTop");

//綁定滾動和鼠標(biāo)事件
$(window).bind("scroll", naviga_stay_top);
$(window).bind("mousewheel",naviga_stay_top);
$(document).bind("scroll", naviga_stay_top);
$(document).bind("mousewheel",naviga_stay_top);
}

$(document).ready( onload_function );

test.css:注意navigation類的樣式
復(fù)制代碼 代碼如下:

div.main{
width: 800px;
background: #CCC;
margin: 10px auto 0;
position: relative;
}

div.content{
width: 800px;
height: 400px;
background: yellow;
margin: 10px auto 0;
}

div.navigation{
width: 800px;
height: 40px;
background: red;
margin: 0 auto;
top: 400px;
left:50%;
position: fixed;
margin-left:-400px;
}

div.tab{
width: 195px;
height: 40px;
background: blue;
float: left;
margin-left: 5px;
}

總結(jié)：

出現(xiàn)這個(gè)問題的原因還是CSS的布局定位不熟悉。

在這里沒法通過：margin 0 auto；來設(shè)置導(dǎo)航條div水平居中，因?yàn)閒ixed定位的元素沒法通過這種方式來定位。

通過margin 0 auto；來定位的元素不能為fixed定位，并且其父元素必須要有固定的寬度。

那么怎么使fixed定位的元素水平居中呢？

通過：left: 50%，將該元素的最左邊與父元素寬的中點(diǎn)對其，然后通過marg-left: [該元素寬度的1/2]px；來將這個(gè)元素向左移動它的寬度的一般，從而使這個(gè)元素居中。
  • MQTT.js 入門使用教程

    MQTT.js 入門使用教程

    MQTT.js?是一個(gè)開源的?MQTT 協(xié)議的客戶端庫，使用 JavaScript 編寫，主要用于 Node.js 和 瀏覽器環(huán)境中，這篇文章主要介紹了MQTT.js 入門教程,需要的朋友可以參考下
    2023-04-04
  • Uploadify上傳文件方法

    Uploadify上傳文件方法

    Uploadify是JQuery的一個(gè)上傳插件，實(shí)現(xiàn)的效果非常不錯(cuò)，帶進(jìn)度顯示。接下來通過本文給大家介紹Uploadify上傳文件方法，涉及到Uploadify在Aspnet中的使用相關(guān)知識，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友一起學(xué)習(xí)吧
    2016-03-03
  • JavaScript實(shí)現(xiàn)更換頭像功能

    JavaScript實(shí)現(xiàn)更換頭像功能

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)更換頭像功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-08-08
  • 解決Layui中templet中a的onclick參數(shù)傳遞的問題

    解決Layui中templet中a的onclick參數(shù)傳遞的問題

    今天小編就為大家分享一篇解決Layui中templet中a的onclick參數(shù)傳遞的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • 微信小程序抽獎(jiǎng)組件的使用步驟

    微信小程序抽獎(jiǎng)組件的使用步驟

    這篇文章主要給大家介紹了關(guān)于微信小程序抽獎(jiǎng)組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-01-01
  • js 提交form表單和設(shè)置form表單請求路徑的實(shí)現(xiàn)方法

    js 提交form表單和設(shè)置form表單請求路徑的實(shí)現(xiàn)方法

    下面小編就為大家?guī)硪黄猨s 提交form表單和設(shè)置form表單請求路徑的實(shí)現(xiàn)方法。
    2016-10-10
  • JS簡單生成隨機(jī)數(shù)(隨機(jī)密碼)的方法

    JS簡單生成隨機(jī)數(shù)(隨機(jī)密碼)的方法

    這篇文章主要介紹了JS簡單生成隨機(jī)數(shù)(隨機(jī)密碼)的方法,簡單分析了javascript隨機(jī)數(shù)相關(guān)函數(shù)并結(jié)合具體實(shí)例形式分析了隨機(jī)數(shù)的相關(guān)生成技巧,需要的朋友可以參考下
    2017-05-05
  • javascript實(shí)現(xiàn)控制文字大中小顯示

    javascript實(shí)現(xiàn)控制文字大中小顯示

    網(wǎng)頁上可以自由改變字體大小是個(gè)非常有助于用戶體驗(yàn)的小功能，現(xiàn)在許多網(wǎng)站上都有此功能，今天我們來簡單實(shí)現(xiàn)下。
    2015-04-04

    • 最新評論