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()
