jQuery導(dǎo)航條固定定位效果實(shí)例代碼
更新時(shí)間：2017年05月26日 11:38:31 作者：被時(shí)光移動(dòng)的城
本篇文章主要介紹了jQuery導(dǎo)航條固定定位效果實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
實(shí)現(xiàn)效果圖：
向下滑動(dòng)時(shí)，導(dǎo)航欄固定
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
display: block;
margin: 0 auto;
}
img#search.dhgd{
position: fixed;
left: 50%;
margin-left: -596px;
top: 0px;
}
</style>
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// 給瀏覽器加滾動(dòng)條事件
$(window).scroll(function(){
//獲得當(dāng)前已滾動(dòng)上去的距離
var t = $(document).scrollTop();
console.log('=================='+t)
if(t>126){
$("#search").addClass('dhgd');
}else{
$("#search").removeClass('dhgd');
}
})
})
</script>
</head>
<body style="background: #F1F1F1;">
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了使用jquery做的一個(gè)簡單的屏幕鎖定提示框,需要的朋友可以參考下2014-03-03
jQuery調(diào)用Webservice傳遞json數(shù)組的方法
這篇文章主要介紹了jQuery調(diào)用Webservice傳遞json數(shù)組的方法,實(shí)例分析了jQuery基于ajax與Webservice傳遞json數(shù)據(jù)的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-08-08
現(xiàn)在我們經(jīng)常會(huì)用到一些地圖應(yīng)用，無論是在網(wǎng)頁上還是手機(jī)App中，地圖貌似是一個(gè)不可或缺的應(yīng)用。本文將帶領(lǐng)大家一起來看看jQuery和HTML5的個(gè)性化地圖插件，都是比較實(shí)用的，感興趣的朋友一起學(xué)習(xí)吧2015-11-11
servlet+jquery實(shí)現(xiàn)文件上傳進(jìn)度條示例代碼
現(xiàn)在文件的上傳，特別是大文件上傳，都需要進(jìn)度條。這篇文章主要介紹了servlet+jquery實(shí)現(xiàn)文件上傳進(jìn)度條示例代碼，有興趣的可以了解一下。2017-01-01
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)彈幕APP的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
jquery實(shí)現(xiàn)Slide Out Navigation滑出式菜單效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)Slide Out Navigation滑出式菜單效果代碼,涉及jquery基于鼠標(biāo)事件操作頁面元素動(dòng)態(tài)變換的技巧,需要的朋友可以參考下2015-09-09
chosen實(shí)現(xiàn)省市區(qū)三級聯(lián)動(dòng)
這篇文章主要為大家詳細(xì) 介紹了chosen實(shí)現(xiàn)省市區(qū)三級聯(lián)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
jquery中的$(document).ready()與window.onload的區(qū)別
瀏覽器執(zhí)行window.onload函數(shù)不僅僅是在構(gòu)建完DOM樹之后, 也是在所有圖像和其他外部資源完整的加載并且在瀏覽器窗口顯示完畢之后.2009-11-11
jQuery實(shí)現(xiàn)側(cè)邊導(dǎo)航欄及滑動(dòng)電梯效果(仿淘寶)
這篇文章主要介紹了如何利用JQuery+CSS模擬淘寶實(shí)現(xiàn)側(cè)邊導(dǎo)航欄以及滑動(dòng)電梯效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以動(dòng)手試一試2022-03-03
jQuery插件Easyui設(shè)置datagrid的pageNumber導(dǎo)致兩次請求問題的解決方法
這篇文章主要介紹了jQuery插件Easyui設(shè)置datagrid的pageNumber導(dǎo)致兩次請求問題的解決方法,較為詳細(xì)的描述了出現(xiàn)的問題、問題的原因及相應(yīng)的解決方法,需要的朋友可以參考下2016-08-08