潜行者m

在页面中添加滚动一定距离后跟随滚动模块的方法和注意事项 Demo 页面

效果

这里是网页的内容

跟随之后有很明显的塌陷和页面回流(reflow)

跟随之后有很明显的塌陷和页面回流(reflow)

跟随之后有很明显的塌陷和页面回流(reflow)

跟随之后有很明显的塌陷和页面回流(reflow)

本来应该在下面的内容，就一下子突然跳到上面去了

本来应该在下面的内容，就一下子突然跳到上面去了

本来应该在下面的内容，就一下子突然跳到上面去了

本来应该在下面的内容，就一下子突然跳到上面去了

本来应该在下面的内容，就一下子突然跳到上面去了

本来应该在下面的内容，就一下子突然跳到上面去了

代码

HTML结构

自行右键查看源代码

CSS代码

.menu{position:relative;background:#ccc;height:160px;line-height:160px;text-align:center;width:715px;}

JS代码

$(window).scroll(function(){
	if ($(window).scrollTop()>207){
		$(".menu").css({position:"fixed",top:"0px",opacity:"0.5"});
	}else{
		$(".menu").css({position: "relative",opacity:"1"});
	}
});