特效描述:Sticky-js制作 网页滚动 左右浮动 固定层插件。Sticky-js制作网页滚动左右浮动固定层插件
代码结构
1. 引入CSS
<link rel="stylesheet" href="css/foundation.min.css"> <link href="css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/demo.css">
2. 引入JS
<script src="dist/sticky.compile.js"></script>
3. HTML代码
<section class="container"> <div class="row" data-sticky-container> <div class="medium-3 columns show-for-medium"> <img src="http://placehold.it/250x250" class="float-left" alt="Sticky" data-sticky data-margin-top="20"> </div> <div class="small-12 medium-9 large-7 columns"> <h1>Sticky-js</h1> <h2> <p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>来源:<a href="www.51qianduan.com" target="_blank">站长素材</a></p> </h2> <div class="gh-buttons"> <a class="github-button" href="https://github.com/rgalus/sticky-js" data-icon="octicon-eye" data-count-href="rgalus/sticky-js/watchers" data-count-api="repos/rgalus/sticky-js#subscribers_count" data-count-aria-label="# watchers on GitHub" aria-label="Watch rgalus/sticky-js on GitHub">Watch</a> <a class="github-button" href="https://github.com/rgalus/sticky-js" data-icon="octicon-star" data-count-href="rgalus/sticky-js/stargazers" data-count-api="repos/rgalus/sticky-js#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star rgalus/sticky-js on GitHub">Star</a> </div> <h3>Features</h3> <ul> <li>Written in vanilla javascript, no dependencies needed</li> <li>Lightweight (minified: ~6.08kb, gzipped: ~1.67kb)</li> <li>It can be sticky to the entire page or to selected parent container</li> <li>No additional CSS needed</li> </ul> <h3>Install</h3> <pre>npm install sticky-js</pre> <br> <pre>bower install sticky.js</pre> <h3>Usage</h3> <p><strong>Simply include</strong></p> <pre><script src="sticky.min.js"></script></pre> <p><strong>Then have element</strong></p> <pre><div class="selector">Sticky element</div></pre> <p><strong>Initialize with javascript</strong></p> <pre>var sticky = new Sticky('.selector');</pre> <p><strong>CommonJS</strong></p> <pre>var Sticky = require('sticky-js');<br><br>var sticky = new Sticky('.selector');</pre> <p><strong>Sticky to the nearest parent container with [data-sticky-container]</strong></p> <pre><div data-sticky-container><br> <div class="selector">Sticky element</div><br></div></pre> <br> <p><a href="#" title="Sticky-js - License">MIT License</a></p> </div> <div class="large-2 columns show-for-large" style="padding-top: 10rem;"> <img src="http://placehold.it/160x600" class="float-right" alt="Sticky" data-sticky data-margin-top="20"> </div> </div> </section> <script type="text/javascript"> var sticky = new Sticky('[data-sticky]'); </script>