Sticky-js制作網頁滾動左右浮動固定層插件



74 295 99



特效描述: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.vxisgr.tw" 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>&lt;script src="sticky.min.js"&gt;&lt;/script&gt;</pre>
<p><strong>Then have element</strong></p>
<pre>&lt;div class="selector"&gt;Sticky element&lt;/div&gt;</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>&lt;div data-sticky-container&gt;<br>    &lt;div class="selector"&gt;Sticky element&lt;/div&gt;<br>&lt;/div&gt;</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>



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


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 自動滾動圖片輪播 浮動提示框 圖片廣告 全屏滾動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

湖北30选5开奖结果走势图表