jQuery實(shí)現(xiàn)仿百度帖吧頭部固定導(dǎo)航效果
本文實(shí)例講述了jQuery實(shí)現(xiàn)仿百度帖吧頭部固定導(dǎo)航效果。分享給大家供大家參考。具體如下:
這里使用jquery實(shí)現(xiàn)網(wǎng)頁(yè)上的頭部固定,但不隨滾動(dòng)條滾動(dòng)的效果,在百度貼吧里整理出來(lái)的網(wǎng)頁(yè)特效,最開始的時(shí)候,固定條可以隨滾動(dòng)條拖動(dòng)至網(wǎng)頁(yè)頂部,但到達(dá)網(wǎng)頁(yè)頂部后,再次拖動(dòng)滾動(dòng)條,頭部并不滾動(dòng),其它的內(nèi)容可以滾動(dòng),貌似在網(wǎng)上見的挺多的效果。
運(yùn)行效果截圖如下:
具體代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>導(dǎo)航固定</title> <script src="jquery-1.6.2.min.js"language="javascript" type="text/javascript"></script> <script> $(function(){ $(window).scroll(function() { //$("body").css({"background-position":"center "+$(window).scrollTop()+""}); if($(window).scrollTop()>=250){ $(".nav").addClass("fixedNav"); }else{ $(".nav").removeClass("fixedNav"); } }); }); </script> <style> *{ margin:0px; padding:0px; } div.nav{ background:#000000; height:57px; line-height:57px; color:#ffffff; text-align:center; font-family:"微軟雅黑", "黑體"; font-size:30px; } div.fixedNav{ position:fixed; top:0px; left:0px; width:100%; z-index:100000; _position:absolute; _top:expression(eval(document.documentElement.scrollTop)); } </style> </head> <body> <div class="header" style="background:#CCCC00;height:250px;"></div> <div class="nav"> <p>導(dǎo)航固定</p> </div> <div class="content" style="background:#0099FF; height:2000px;"></div> </body> </html>
希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。
- jQuery實(shí)現(xiàn)智能判斷固定導(dǎo)航條或側(cè)邊欄的方法
- 使用jQuery.Pin垂直滾動(dòng)時(shí)固定導(dǎo)航
- jQuery+CSS3實(shí)現(xiàn)仿花瓣網(wǎng)固定頂部位置帶懸浮效果的導(dǎo)航菜單
- jQuery實(shí)現(xiàn)網(wǎng)頁(yè)頂部固定導(dǎo)航效果代碼
- jQuery 頂部導(dǎo)航跟隨滾動(dòng)條滾動(dòng)固定浮動(dòng)在頂部
- jquery實(shí)現(xiàn)的導(dǎo)航固定效果
- jquery實(shí)現(xiàn)的讓超出顯示范圍外的導(dǎo)航自動(dòng)固定屏幕最頂上
- jQuery導(dǎo)航條固定定位效果實(shí)例代碼
相關(guān)文章
jquery實(shí)現(xiàn)在光標(biāo)位置插入內(nèi)容的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)在光標(biāo)位置插入內(nèi)容的方法,涉及jQuery功能的擴(kuò)展技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02jquery 模擬類搜索框自動(dòng)完成搜索提示功能(改進(jìn))
改進(jìn)版,支持多個(gè)輸入框!前面因?yàn)槎鄠€(gè)輸入框信息不好保存所以只能支持一個(gè),現(xiàn)在用輸入框的alt屬性來(lái)保存修改前的內(nèi)容,所以能支持多個(gè)輸入框了.初步測(cè)試沒發(fā)現(xiàn)問題,歡迎大家一起測(cè)試改進(jìn)!!!2010-05-05jQuery滾動(dòng)加載圖片效果的實(shí)現(xiàn)
實(shí)現(xiàn)滾動(dòng)加載的一個(gè)功能函數(shù),需要的朋友可以參考一下2013-03-03jQuery實(shí)現(xiàn)的購(gòu)物車物品數(shù)量加減功能代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的購(gòu)物車物品數(shù)量加減功能,涉及jQuery針對(duì)鼠標(biāo)事件的響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-11-11jQuery on()綁定動(dòng)態(tài)元素出現(xiàn)的問題小結(jié)
jQuery on()方法是官方推薦的綁定事件的一個(gè)方法。使用 on() 方法可以給將來(lái)動(dòng)態(tài)創(chuàng)建的動(dòng)態(tài)元素綁定指定的事件,通過本文給大家介紹jQuery on()綁定動(dòng)態(tài)元素出現(xiàn)的問題小結(jié),需要的朋友參考下2016-02-02