html5页面滚动固定层插件



127 504 169



特效描述: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

加群请备注:从官网了解到