利用js實現頁面下拉左右浮動固定代碼



11 43 15



特效描述:利用js實現 頁面下拉 左右浮動 固定代碼,利用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>
</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

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

老夫子电子 福彩3d 跳舞赚钱好吗 吉林快三开奖直播 131期湖北福彩30选5 在农村投资什么项目赚钱 北京快乐赛车pk10直播 5元刮刮乐中奖编号规律 陕西的麻将什么打法 王中王一码一肖期期准 超级课程表怎么赚钱啊 体彩福建36选7玩法 北京晒车pk10牛牛 万州同城麻将下载 陕西快乐十分预测号码 足彩半全场优化 老11选5贴吧