js 网页代码 div随滚动条移动到浏览器顶部固定的问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<script src="jquery-1.11.1.js"></script>
<script type="text/javascript">
//$(document).ready(function(){

$(function(){

//获取要定位元素距离浏览器顶部的距离

var navH = $(".nb").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"});

}

})

})
//})
</script>

</head>

<body>
<div style="background:#003366;height:500px;">空div</div>

<div style="height:500px;width:200px;background:purple">
<div class="nb" style="height:100px;width:100px;background:#9966FF">移动到顶部固定不变</div>
</div>

<div style="background:#ff0000;height:1500px;">空div</div>
<div style="background:#ccc;height:1500px;">空div</div>
</body>
</html>

网上看到的代码我想让蓝色的代码块底部在到紫色代码块底部的时候停止固定要怎么办呢？
还有我要是想要设置2个 div 随动块一上一下要怎么设置呢？

举报该问题

推荐答案推荐于2017-09-29

//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"});  //在紫色块的时候不固定
      }
    })
  })

追问

虽然很感谢你的帮助不过完全不是我要的效果……
我的意思是说“移动到顶部固定不变”这个模块只能在紫色里显示……
完全反了我看看能看懂你的代码不……

温馨提示：答案为网友推荐，仅供参考

当前网址：http://22.wendadaohang.com/zd/CTTXShTT6hhSTIfTX2.html

其他回答

第1个回答 2014-12-01

你是指停止固定还是固定？因为你现在没有固定在页面顶部啊。
这个问题可以用js判断，判断一下滑动到的位置决定。
关于这个一上一下的，我记得有一个插件可以实现，你可以查查，运气好能找到。找不到自己做吧，js控制位置方向还不错。

相似回答

...当滑动滚动条的时候,div向上移动,移动到浏览器的最上方,一直显示...答：加载jquery插件 ebooking_fs这个换成要浮动的div的id <script type="text/javascript"> //search-box 随屏幕滚动 var _box_y = $("#ebooking_fs").offset().top;var _box_x = $("#ebooking_fs").offset().left;(window).scroll(function(){ if($(window).scrollTop() > _box_y){...

如何用div实现页面上下部分固定,中间部分随滚动条移动而移动的代码答：1、头部定义一个div，固定高度，设置绝对定位(position:absolute)，设置上边距(top:0);2、底部定义一个div，固定高度，设置绝对定位(position:absolute)，设置下边距(bottom:0);3、中间定义一个div，设置滚动条自动( overflow: auto); 设置绝对定位(position:absolute)，设置top和bottom，top的值等于头部...

大家正在搜

浏览器滚动条浏览器滚动条不见了浏览器滚动条怎么隐藏隐藏浏览器滚动条浏览器滚动条怎么设置 360浏览器没有滚动条浏览器滚动条拉不下来浏览器横向滚动条 360浏览器左右滚动条

js 网页代码 div随滚动条 移动到浏览器顶部 固定的问题

js 网页代码 div随滚动条移动到浏览器顶部固定的问题