height:1500px;">空div 移动到底部固定不变 //js$(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $(".nb").offset().top; var navH2 = $("...
js 网页代码 div随滚动条 移动到浏览器顶部 固定的问题
//html<body> <div style="background:#003366;height:500px;">空div</div> <div class="purple" style="height:500px;width:200px;background:purple"><div class="nb" style="height:100px;width:100px;background:#9966FF">移动到顶部固定不变</div> </div><div class="red" style="background:#ff0000;height:1500px;">空div</div> <div style="background:#ccc;height:1500px;">空div</div> <div class="nb2" style="height:100px;width:100px;background:gray;">移动到底部固定不变</div> </body> //js$(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $(".nb").offset().top; var navH2 = $(".nb2").offset().top; var Pur= $(".purple").offset().top; //紫色块 var Red= $(".red").offset().top; //红色块 //滚动条事件 $(window).scroll(function(){ //获取滚动条的滑动距离 var scroH = $(this).scrollTop(); //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定 if(scroH>=navH){ $(".nb").css({"position":"fixed","top":0}); }else if(scroH<navH){ $(".nb").css({"position":"static"}); } if(scroH <= navH2){ $(".nb2").css({"position":"fixed","bottom":"15px","right":"15px"}); }else if(scroH<navH){ $(".nb2").css({"position":"static"}); } if(scroH >= Pur && scroH <= Red){ $(".nb").css({"position":"static"}); //在紫色块的时候不固定 $(".nb2").css({"position":"static"}); //在紫色块的时候不固定 } }) })2014-12-04
你是指停止固定还是固定？因为你现在没有固定在页面顶部啊。
这个问题可以用js判断，判断一下滑动到的位置决定。
关于这个一上一下的，我记得有一个插件可以实现，你可以查查，运气好能找到。找不到自己做吧，js控制位置方向还不错。2014-12-01
