html5頁面滾動固定層插件



133 531 178



特效描述:html5 頁面滾動 固定層插件,hc-sticky是一款頁面滾動固定層插件。可以跨瀏覽器使用,當頁面滾動時將指定元素固定在網頁窗口上的功能。

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/other.css">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">

2. HTML代碼

	<div class="container">
		<header class="header" style="background:#f1f5f8;">
			<h1>HC Sticky</h1>
		</header>
		<div class="content">
			  <ul><li>
			      <input type="checkbox" checked>
			      <i></i>
			      <h2>Default - 元素比窗口大的情況</h2>
			      <p>側邊欄比瀏覽器窗口高,側邊欄在向下滾動時會附著在頁面的底部,在向上滾動時會附著在頁面的頂部。</p>
			      <p><a href="./demo_1.html" class="demo">查看示例</a></p>
			    </li><li>
			      <input type="checkbox" checked>
			      <i></i>
			      <h2>Default - 元素比窗口小的情況</h2>
			      <p>側邊欄比頁面的高度小,側邊欄在頁面向上或向下滾動時都會附著在頁面的頂部。</p>
			      <p><a href="./demo_2.html" class="demo">查看示例</a></p>
			    </li><li>
			      <input type="checkbox" checked>
			      <i></i>
			      <h2>多個固定元素</h2>
			      <p>Nice example showing multiple stickies on one page.</p>
			      <p><a href="./demo_3.html" class="demo">查看示例</a></p>
			    </li><li>
			      <input type="checkbox" checked>
			      <i></i>
			      <h2>元素內部的固定元素</h2>
			      <p>Use <code>innerSticker</code> option to stick at a certain element. In this example, sticky will stick to the second box inside the sidebar only when you go <strong>up</strong>. When you go down it sticks to the bottom of the sidebar.</p>
			      <p><a href="./demo_4.html" class="demo">Launch Demo</a></p>
			    </li><li>
			      <input type="checkbox" checked>
			      <i></i>
			      <h2>不跟隨滾動的內部固定元素</h2>
			      <p>Use <code>innerSticker</code> option to stick at a certain element, and <code>followScroll:false</code> so the sidebar doesn't follow the scroll once attached. In this example, sticky will stick to the second box inside the sidebar when you go <strong>down</strong> or <strong>up</strong>.</p>
			      <p><a href="./demo_5.html" class="demo">查看示例</a></p>
			    </li><li>
			      <input type="checkbox" checked>
			      <i></i>
			      <h2>Inner Top not following scroll</h2>
			      <p>Use <code>innerTop</code> option to stick after a certain distance, and <code>followScroll:false</code> so the sidebar doesn't follow the scroll once attached. In this example, sticky will stick 200px from top inside the sidebar when you go <strong>down</strong> or <strong>up</strong>.</p>
			      <p><a href="./demo_6.html" class="demo">查看示例</a></p>
			    </li></ul>
		</div>
	</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 自動滾動圖片輪播 滑動星星打分 其他 圖片文字滾動 文字圖片滾動 多功能 多功能插件
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子