以下是 jquery可浮动固定在网页顶部下拉菜单特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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=gb2312">
<title>jquery可浮动固定在网页顶部下拉菜单</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div id="toc-holder" class="toc-holder">
<a href="#" class="toc-link" id="toc-link"><span>▼</span> Table of
Contents</a>
<ul id="toc" class="toc">
<li class="toc-h1"><a href="#section1">1. Loomings</a>
<ul class="toc-sub closed">
<li><a href="#section1-1">1.1 Call me Ishmael</a></li>
<li><a href="#section1-2">1.2 Circumambulate</a></li>
</ul>
</li>
<li class="toc-h1"><a href="#section2">2. The Carpet-Bag</a>
<ul class="toc-sub closed">
<li><a href="#section2-1">2.1 I stuffed a shirt</a></li>
<li><a href="#section2-2">2.2 As most young candidates</a></li>
</ul>
</li>
<li class="toc-h1"><a href="#section3">3. The Spouter-Inn</a>
<ul class="toc-sub closed">
<li><a href="#section3-1">3.1 Entering that gable-ended</a></li>
<li><a href="#section3-2">3.2 But what most puzzled</a></li>
</ul>
</li>
<li class="toc-h1"><a href="#section4">4. Counterpane</a>
<ul class="toc-sub closed">
<li><a href="#section4-1">4.1 Upon waking next morning about
daylight, I found Queequeg's arm thrown over me</a></li>
<li><a href="#section4-2">4.2 My sensations were strange</a></li>
</ul>
</li>
<li class="toc-h1"><a href="#section5">5. Breakfast</a>
<ul class="toc-sub closed">
<li><a href="#section5-1">5.1 I quickly followed suit</a></li>
<li><a href="#section5-2">5.2 You could pretty plainly tell</a></li>
</ul>
</li>
<li class="toc-h1"><a href="#section6">6. The Street</a>
<ul class="toc-sub closed">
<li><a href="#section6-1">6.1 If I had been astonished at first</a></li>
<li><a href="#section6-2">6.2 But, besides the Feegeeans</a></li>
</ul>
</li>
</ul>
</div><!-- .toc-holder -->
<h1>Fixed Table of Contents Dropdown Menu with jQuery</h1>
<section id="section1">
<h1>Loomings</h1>
<h2 id="section1-1">Call me Ishmael</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit
amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget
tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate
magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit
amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget
tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate
magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
accumsan porttitor, facilisis luctus, metus</p>
<h2 id="section1-2">Circumambulate</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit
amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget
tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate
magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit
amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget
tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate
magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
accumsan porttitor, facilisis luctus, metus</p>
</section>
<section id="section2">
<h1>The Carpet-Bag</h1>
<h2 id="section2-1">I stuffed a shirt</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit
amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget
tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate
magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit
amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget
tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate
magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
accumsan porttitor, facilisis luctus, metus</p>
<h2 id="section2-2">As most young candidates</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit
amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget
tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate
magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit
amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget
tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate
magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
accumsan porttitor, facilisis luctus, metus</p>
</section>
<section id="section3">
<h1>The Spouter-Inn</h1>
<h2 id="section3-1">Entering that gable-ended</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit
amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget
tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate
magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit
amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget
tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate
magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
accumsan porttitor, facilisis luctus, metus</p>
<h2 id="section3-2">But what most puzzled</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit
amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget
tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate
magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit
amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget
tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate
magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
accumsan porttitor, facilisis luctus, metus</p>
</section>
<section id="section4">
<h1>Counterpane</h1>
<h2 id="section4-1">Upon waking next morning about daylight, I found
Queequeg's arm thrown over me</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit
amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget
tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate
magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit
amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget
tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate
magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
accumsan porttitor, facilisis luctus, metus</p>
<h2 id="section4-2">My sensations were strange</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit
amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget
tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate
magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit
amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget
tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate
magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
accumsan porttitor, facilisis luctus, metus</p>
</section>
<section id="section5">
<h1>Breakfast</h1>
<h2 id="section5-1">I quickly followed suit</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit
amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget
tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate
magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit
amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget
tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate
magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
accumsan porttitor, facilisis luctus, metus</p>
<h2 id="section5-2">You could pretty plainly tell</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit
amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget
tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate
magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit
amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget
tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate
magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
accumsan porttitor, facilisis luctus, metus</p>
</section>
<section id="section6">
<h1>The Street</h1>
<h2 id="section6-1">If I had been astonished at first</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit
amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget
tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate
magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit
amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget
tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate
magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
accumsan porttitor, facilisis luctus, metus</p>
<h2 id="section6-2">But, besides the Feegeeans</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit
amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget
tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate
magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit
amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget
tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate
magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
accumsan porttitor, facilisis luctus, metus</p>
</section>
<footer>
<p>© 2012 whatever</p>
</footer>
<a href="#top" class="top-link" id="top-link">▲ Top</a>
</div><!-- .container -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fixedTOC.js"></script>
<script>
// call the plugin on the "#toc" element
$('#toc').fixedTOC({
menuOpens: 'click', // or 'mouseenter'
scrollSpeed: 1000,
menuSpeed: 300,
useSubMenus: true,
resetSubMenus: true,
topLinkWorks: true
});
</script>
</body>
</html>
JS代码(jquery.fixedTOC.js):
(function ($){
$.fixedTOC = function (el,settings){
var base = this,s = null;
base.$el = $(el);
base.el = el;
// Add a reverse reference to the DOM object base.$el.data("fixedTOC",base);
base.settings = $.extend({
}
,$.fixedTOC.defaultSettings,settings);
s = base.settings;
if (!s.useSubMenus){
s.tocLinks = '.toc-h1 > a';
}
base.methods ={
init:function (){
// Put your initialization code here s.tocSub.slideUp();
s.tocHeight = base.$el.height() + 20;
base.$el.css({
top:'-' + s.tocHeight + 'px'}
);
base.$el.addClass(s.tocUpClass);
}
,doOpenMenu:function (){
s.tocLink.on(s.menuOpens,function (){
if (base.$el.hasClass(s.tocUpClass)){
s.tocLink.find('span').addClass('rotate');
base.$el.stop().animate({
top:'0'}
,s.menuSpeed,function (){
base.$el.removeClass(s.tocUpClass);
}
);
}
else{
s.tocHeight = base.$el.height() + 20;
s.tocLink.find('span').removeClass('rotate');
base.$el.stop().animate({
top:'-' + s.tocHeight + 'px'}
,s.menuSpeed,function (){
base.$el.addClass(s.tocUpClass);
$('.toc-sub').slideUp(0);
}
);
}
return false;
}
);
}
,doOpenItem:function (){
$('.toc-h1>a').on('click',function (){
s.tocSub.each(function (){
if (!$(this).hasClass('closed')){
$(this).stop().slideUp().addClass('closed');
}
}
);
$(this).parent().find('.toc-sub').stop().slideToggle().removeClass('closed');
return false;
}
);
}
,doScroll:function (){
$(s.tocLinks).on('click',function (){
s.currHash = $(this)[0].hash;
$('html,body').animate({
scrollTop:$(s.currHash).offset().top - 80}
,s.scrollSpeed,function (){
location.hash = s.currHash;
}
);
return false;
}
);
}
,doCloseMenu:function (){
$('#toc-holder').on('mouseleave',function (){
s.tocHeight = base.$el.height() + 20;
s.tocLink.find('span').removeClass('rotate');
base.$el.animate({
top:'-' + s.tocHeight + 'px'}
,s.menuSpeed,function (){
base.$el.addClass(s.tocUpClass);
if (s.resetSubMenus){
$('.toc-sub').slideUp(0);
}
}
);
}
);
}
,doTopLink:function (){
$(s.topLink).on('click',function (){
s.currHash = $(this)[0].hash;
$('html,body').animate({
scrollTop:0}
,s.scrollSpeed,function (){
location.hash = s.currHash;
}
);
return false;
}
);
}
}
;
// Run methods base.methods.init();
base.methods.doOpenMenu();
if (s.useSubMenus){
base.methods.doOpenItem();
}
base.methods.doScroll();
base.methods.doCloseMenu();
if (s.topLinkWorks){
base.methods.doTopLink();
}
}
;
$.fixedTOC.defaultSettings ={
// non-customizable settings tocHeight:null,tocSub:$('.toc-sub'),tocUpClass:'toc-up',tocLink:$('#toc-link'),tocLinks:'.toc-h1 ul a',topLink:$('#top-link'),currHash:null,// customizable settings scrollSpeed:1000,menuSpeed:300,useSubMenus:true,resetSubMenus:true,topLinkWorks:true}
;
$.fn.fixedTOC = function (settings){
return this.each(function (){
(new $.fixedTOC(this,settings));
}
);
}
;
}
)(jQuery);
CSS代码(normalize.css):
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
/* 酷站代码 http://www.5icool.org */
CSS代码(styles.css):
body{margin:0 auto;font-family:Georgia,'Times New Roman',serif;font-size:20px;color:#343434;background:#ebddba;background:-webkit-linear-gradient(#ebddba,#f9f1dd,#ebddba);background:-moz-linear-gradient(#ebddba,#f9f1dd,#ebddba);background:-o-linear-gradient(#ebddba,#f9f1dd,#ebddba);background:-ms-linear-gradient(#ebddba,#f9f1dd,#ebddba);background:linear-gradient(#ebddba,#f9f1dd,#ebddba);overflow-x:hidden;}
a:link,a:visited{color:#3381d6;-webkit-transition:color .7s ease;-moz-transition:color .7s ease;-o-transition:color .7s ease;-ms-transition:color .7s ease;transition:color .7s ease;}
a:hover,a:active,a:focus{color:#e06c1f;}
.container{width:90%;max-width:900px;margin:0 auto;position:relative;padding:70px 10px 0 10px;}
.toc-holder{width:18%;min-width:360px;}
.toc-holder a:link,.toc-holder a:visited{text-decoration:none;-webkit-transition:all .7s ease;-moz-transition:all .7s ease;-o-transition:all .7s ease;-ms-transition:all .7s ease;transition:all .7s ease;}
.toc-holder li li a:link,.toc-holder li li a:visited{padding-left:50px;}
.toc-holder li a:hover{background:#666;border-left:solid 5px transparent;}
.toc-holder{position:fixed;margin-top:-70px;}
.toc-link:link,.toc-link:visited{color:white;position:relative;display:block;z-index:20;height:40px;line-height:40px;padding-left:10px;width:100%;background:#444;}
.toc-link:hover{background:#666;}
.toc-link span{font-size:16px;margin-right:5px;display:inline-block;-webkit-transition:-webkit-transform .4s ease;-moz-transition:-moz-transform .4s ease;-o-transition:-o-transform .4s ease;-ms-transition:-ms-transform .4s ease;transition:transform .4s ease;}
.toc-link span.rotate{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
.toc{position:absolute;z-index:10;width:103%;background:#222;padding:40px 0 20px 0;}
.toc-h1,.toc-h1 ul{list-style:none;margin:0;padding:0;}
.toc-h1 a:link,.toc-h1 a:visited{color:white;padding:5px 20px 5px 30px;display:block;}
.closed{display:none;}
h1{font-family:Georgia,sans-serif;font-size:2.3em;font-style:italic;margin:0 0 40px 0;text-shadow:rgba(0,0,0,0.2) 2px 2px 5px;}
footer{padding-bottom:30px;}
p{margin-bottom:30px;}
.p1{color:darkgreen;}
h2{font-family:Arial,Helvetica,sans-serif;font-size:30px;font-weight:bold;}
.top-link:link,.top-link:visited{display:block;text-decoration:none;position:fixed;bottom:0;right:2%;color:white;background:#222;padding:8px 16px 0 16px;height:30px;font-size:14px;-webkit-border-radius:10px 10px 0 0;-moz-border-radius:10px 10px 0 0;border-radius:10px 10px 0 0;}
@media (max-width:480px){.toc-holder{left:0;right:0;}
.toc-link:link,.toc-link:visited{width:150%;}
.toc{width:155%;}
.top-link:link,.top-link:visited{top:2px;z-index:20;background:none;}
}
/* 酷站代码 http://www.5icool.org */
分享到QQ
分享到微博
微信扫一扫
