写的一个stickup插件

发表于   |   分类于 ，   |  

写的一个jquery的插件 stickup 和回到顶部。。。感觉还不会封装函数好蠢的样子。。。。

stickup思路

stickup 给人感觉就是这个东西呗粘在了顶部。第一时间想到了绝对定位。顺着这个思路往下想就很简单了。

  • 先取得这个元素的坐标.即为offset()top，和left,以及宽高。
  • 然后在克隆一个元素出来，把他放在目标元素的前面(先隐藏)，这样目标元素固定定位，脱离文档流之后，再把这个元素显示出来，就不会使得后面的元素位置发生变化。
  • 然后给window设置一个scorll事件。当窗口垂直滚动的距离超过目标元素距离根元素的垂直距离，就让目标元素绝对定位，left就是offset().left,top：0，这时候有点要注意的事就是。width和height都要设置下。然后再把clone元素显示。
  • 如果当窗口垂直滚动的距离小于目标元素距离根元素的垂直距离时候，让目标元素回来原来的位置.这里可以用$node.removeAttr("style")来让元素回到原来位置，还是挺不错的，然后让clone元素隐藏

总体思路就是这些啦。下面是具体代码

stickup代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
(function ($) {
$.fn.stickup=function(node){
var $cur=$(this);//方便后面操作this。
	var top=$cur.offset().top;//获取元素距离顶部的距离
	var left=$cur.offset().left;//获取元素的水平位置
	var width=$cur.width();//获取元素的宽度
	var height=$cur.height();//获取元素的高度
	
	//克隆这个元素，这里opactiy和display:none 是双重保险.
	var now=$cur.clone().css("opacity",0).insertBefore($cur).hide();
	
	$(window).on("scroll",function(){


		var socrllTop=$(window).scrollTop();
		if(socrllTop>=top){
			setStick();
		}else{
			unsetStick()
		}
	})

	function setStick(){
		$cur.css({
			"position":"fixed",
			"left":left,
			"top":0,
			"width":width,
			"height":height,
			"z-index":10
		})
		now.show();
	}

	function unsetStick(){
		$cur.removeAttr("style"),
		now.hide()
	}
}

})(jQuery);

预览点我