关于stick up

demo

1. 当页面滚动时导航条碰触到窗口顶部会粘贴固定到窗口顶部，当页面滚下时导航条回到原位
   task-28-1
   2.多个stick up
   task-28-2

思路

最近学习了一下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()