🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

scrollFix is a jQuery plugin that fixes any elements (typically header navigation, sidebar component) to the top (and even bottom) of the webpage during page scrolling.

Sticky

Documentation

jQuery-scrollFix 介绍

jQuery-scrollFix 一个滚动固定在某个位置的jQuery插件。 点击预览

遵循 AMDCMD 规范

当前版本: v2.0.2

参数详解

参数 | 描述 | 默认值 ---|---|---|--- top | 浮动对象 到顶部的高度 | 0 bottom | 浮动对象 到停靠对象(startObj)的间距 | 0 zindex | 浮动对象 的z-index索引值 | 999 startObj | 滑到 startObj 位置时开始浮动固定,默认为浮动对象 | null position | 滑到 startObj 顶端/底端 开始浮动固定 | top/bottom endObj | 滑到 endObj 顶部时取消固定并继续跟随滚动 | null endPos | 浮动对象 到停止对象(endObj)的间距 | 0 fixClass | 浮动固定后添加 class 样式 | fixed fixFn | 浮动固定后回调 | - fixEndFn | 浮动固定结束后回调 | - endFn | 浮动结束后回调 | -

用法

先在页面引入 jQueryscrollFix.js 文件

<script src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script> <script src="../dist/jQuery.scrollFix.min.js"></script>

调用

// 滚动到 `#nav` 位置后开始浮动固定 $('#nav').scrollFix();  // 滚动到 `#main` 位置后开始浮动固定, 滚动到 `#footer` 后停止固定并跟随滚动 $('#nav').scrollFix({ 	top: 60, 	bottom: 20, 	startObj: '#main', 	endObj: '#footer', 	endPos: 20, 	fixFn: function() { 		console.log('开始浮动固定'); 	}, 	endFn: function() { 		console.log('结束浮动'); 	} });

Demo

点击预览

Bug tracker

Have a bug? Please create an issue on GitHub at issues


You May Also Like