用jquery實現仿蘑菇街導航固定頂部的效果
<!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>無標題文件</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var headHeight=$(".header").height()+10;
var nav=$(".nav");
$(window).scroll(function(){
if($(this).scrollTop()>headHeight){
nav.addClass("navFix");
}
else{
nav.removeClass("navFix");
}
})
})
</script>
<style type="text/css">
*{ margin:0; padding:0;}
body{ _background-attachment:fixed; _background-image:url(about:blank);} //實現ie6不支援fixed方法
.header{ width:1000px; height:60px; margin:0 auto; text-align:center;}
.nav{ border:1px solid #ccc; border-radius:5px; overflow:hidden; height:30px; width:1000px; margin:10px auto; background:#fff;}
.nav li{ float:left; padding:0 10px; height:30px; line-height:30px;}
.nav li a{ text-decoration:none; color:#0CF;}
.nav li a:hover{ color:#000; text-decoration:underline;}
.nav ul{ list-style:none;}
.navFix{ position:fixed; left:0; top:0; _position:absolute; top:expression((offsetParent.scrollTop)+0); z-index:2;} //實現ie6不支援fixed方法
.content{ width:1000px; margin:10px auto;}
</style>
</head>
<body>
<div class="header">
<h1>導航固定在頁面頂部測試</h1>
</div>
<div class="nav">
<ul>
<li><a href="">首頁</a></li>
<li><a href="">藍楓前端</a></li>
<li><a href="">藍楓前端</a></li>
<li><a href="">藍楓前端</a></li>
<li><a href="">藍楓前端</a></li>
<li><a href="">藍楓前端</a></li>
<li><a href="">藍楓前端</a></li>
<li><a href="">藍楓前端</a></li>
</ul>
</div>
<div class="content">
<p>11111</p>
<p>11111</p>
<p>11111</p><p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
</div>
</body>
</html>
相關推薦
用jquery實現仿蘑菇街導航固定頂部的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <
jQuery網頁向下滾動導航固定頂部代碼
頂部 top div lin move c51 att eat oct <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>
Android 仿蘑菇街列表彈出和瀑布流 （ScrollView+RelativeLayout實現）
之前看到用線性佈局寫的瀑布流，覺得不大好，自己想了另外一種方案， （最近發現用 網頁實現瀑布流 再用WebView載入才能完美實現效果） 原理使用RelativeLayout任意定位位置 核心方法 private void addViewByMargins(Re
【安卓-自定義佈局】安卓App開發思路 一步一個腳印（九）實現自定義滾動的新聞條目上下滾動-仿蘑菇街
實現自定義滾動的新聞條目上下滾動-仿蘑菇街 這種上下滾動的自定義佈局，就像是公告那種上下的翻滾，一般為文字的滾動，很明顯，就是自定義佈局，一般是線性佈局。這裡提到的安卓原生的控制元件自然是
Jquery實現仿淘寶天貓左側分類導航外掛
外掛引數配置如下： 1、 target: $('#Z_RightSide')//繫結倚靠右邊容器的ID 2、 fTop: 60,// 距離頂部距離 3、 cTop: 100,// 滾動條滾動多少畫素後開始摺疊的高度 4、 unitHeig
用jQuery實現簡單的DOM操作
追加 匹配 簡單的 rep 兄弟節點 子元素 spa 添加元素 新建 通過jQuery創建元素節點：$oLi = $("<li></li>");這樣我們就創建了一個li標簽 如果想在元素節點中添加文本的話也挺簡單：$oLi = $("<li&g
用jquery實現隱藏列表表單的顯示關閉切換以及Ajax方式改動提交相應的那一行的改動內容。
turn jquery enter lag exit none button inpu ner 請勿盜版，轉載請加上出處http://blog.csdn.net/yanlintao1 請勿盜版，轉載請加上出處http://blog.csdn.net/yanli
用jQuery實現播放時出現的錯誤
畫面 query 今天 absolut htm 元素 play body 我們 今天，我在項目時，我的朋友讓我給她找錯誤，她說她用jQuery寫視頻的播放，獲取的按鈕也對，使用的方法也對，就是播放不了。 她的思路是這樣的，在剛開始的視頻畫面上有個播放按鈕，她想
【前端】用jQuery實現瀑布流效果
scrollto title n) 個性 避免 ive gets type turn jQuery實現瀑布流效果 何為瀑布流： 瀑布流，又稱瀑布流式布局。是比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊並附加
用jquery實現帶左右按鍵的輪播圖
round 500px asc pub video 記錄 找到 blog span 成品如下： 簡單來說就是點擊“右”按鈕時，轉換到右邊的下一幅圖片，同時上面的小方塊顏色也跟著改變，如果已經是最後一幅圖片，再點擊“右”，則轉換到第一幅圖片，是直接向左移找到第一幅圖的，明天
如何用CSS和jQuery實現一個側滑導航菜單
his 事件監聽 也有 font ajax size add tar 出現 為了建立導航菜單，讓我們先看看html結構：<!DOCTYPE html><html lang="en"><head> <meta charset="U
用JQuery實現ajax技術的常用方法
this 鏈接 js實現 一個 nbsp cal 總結 emp 回調函數 在我的前一篇用js實現ajax的三種技術中，我提到了怎麽用原生的js代碼去實現ajax技術，但是 可以看到，代碼相對於來說還是比較多，在我們實際的開發中，我們用到的比較多的技術是用jqu
jquery實現仿京東側邊欄
adding ade left class click height dcl 滾動 tom 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta cha
用 jQuery 實現表單驗證（轉載）
失去焦點 cli on() 獲得 itl 文本框 特殊 體驗 格式 jQuery 官方 API 地址： http://api.jquery.com/ 在線引用 jQuery：http://code.jquery.com/ ——選自《鋒利的jQuery》（第2版）第5章的
用jQuery實現（全選、反選、全不選功能）
sele 元素 selectall input html元素 UNC 推薦 not rop 在jQuery選擇器的基礎下我們實現一個全選，反選，全不選功能！ <script type="text/javascript"> $(functio
DIV+CSS實現仿京東商城導航條效果
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xml
用jQuery實現購物車的總價計算和總價傳值
效果圖: 程式碼實現: 1.多選框程式碼: 2.結算價格程式碼: 3. jQuery實現價格計算程式碼: (當點選多選框時,下面的總計金
用jQuery實現瀑布流及滾動懶載入（相容IE8）
上篇 js原生瀑布流並實現滾動懶載入（相容IE8） 講解了瀑布流的原理及滾動懶載入的原理，並用原生js實現了效果，那麼原生js必定有些繁瑣和麻煩，這一篇我們就換成jQuery，程式碼會簡潔很多，思路和原理我就不贅述了，如果想看的話，移步 js原生瀑布流並實
Android—（實現仿網易新聞的頂部導航指示器）
public class MainActivity extends AppCompatActivity implements View.OnClickListener { private List<View> listViews; private ImageView
用Jquery實現checkbox的反選、全選、全不選
$(function () { //全不選 $("#AllNotChk").click(function () { $("[name=chkbox_id]").removeAttr("checked");