demo
思路
最近学习了一下stick up，发现其实这个效果有思路就挺简单的，然后就开始造轮子了！
1. 什么是stick up呢？
它能让页面目标元素 “固定” 在浏览器窗口的顶部，即便页面在滚动，目标元素仍然能出现在设定的位置。此插件可以在多页面的网站上工作，也能在单页面上面实现导航功能
2. 原理
- 倘若如果你需要滚到到一定距离，让某个元素依然出现在顶部时，我们就需要绝对定位
- 1.但是当这个元素绝对定位的时候，就会脱离文档流，其他元素的位置就会受到影响，因此我们需要clone和它一样的元素（在原本的元素的前面），进行占位，并且让这个占位元素设置成透明和隐藏，当需要他的时候就让他显示出来
2.同时，绝对定位会影响原本的元素的宽度高度，因此当绝对定位后我们要让他的宽度和高度设置成之前一样，而它的顶部偏移应该是0，因为要让元素居于最顶部，而左右的偏移需要和原先的元素一样 - 我们需要做判断，当用户滚动到一定距离时，让元素变成绝对定位，因此可以获取元素原本的偏移数据来做判断。
- 当用户滚动的距离>元素顶部的偏移量，我们就需要让他变成绝对定位,反之也一样。
- 我们所需要的工具函数有
- 是否设置成了fixed，可以设置成一个标记属性，让他确定是否fixed
- 设置成fixed，改变他的CSS，并让克隆的元素展现出来进行占位
- 把fixed删除掉，变回原来一样
3. 现在让我们看一下代码吧！
- 我们可以利用插件的写法，这样以后也可以使用
$.fn.stickup = function(){
// 1. 声明变量
var $cur = $(this), //需要将这个this转换为jQ对象
curWidth = $cur.width(),
curHeight = $cur.height(),
offsetTop = $cur.offset().top,
offsetLeft = $cur.offset().left,
// 2. 克隆元素，进行占位
var $newNav = $cur.clone()
.css('opacity',0)
.insertBefore($cur)
.hide();
//3. 滚动时，判断是否需要进行定位
$(window).on('scroll',function(){
var scrollTop = $(this).scrollTop();
if(scrollTop > offsetTop){
if(!isFixed()){
setFixed()
}
}
else{
if(isFixed()){
removeFixed()
}
}
})
// 4. 工具函数
function isFixed(){
return !!$cur.attr('data-fixed') //两个!!感叹号是为了转义，变成布尔值
}
function setFixed(){
$cur.attr('data-fixed',true)
$cur.css({
position:'fixed',
left:offsetLeft,
width:curWidth,
height:curHeight,
top:0,
"z-index":999
)}
$newNav.show()
}
function removeFixed(){
$cur.removeAttr('data-fixed')
.removeAttr('style');
$newNav.hide()
}
//如果想使用插件的话
('绑定的元素').stickup()
