Question

用户滚动浏览这些div后，我一直试图让两个div粘在页面顶部。两个div都位于同一高度。这是我从其他stackoverflow答案中使用的：

HTML：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
 function sticky_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $('#sticky-anchor').offset().top;
  if (window_top > div_top)
    $('#blockleft').addClass('sticky')
  else
    $('#blockleft').removeClass('sticky');
  }
 $(function() {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
  });
</script>
</head>

<body>
<div id="header"></div>
<div id="sticky-anchor"></div>
<div class="container">
<div id="blockleft"></div>
<div id="blockright"></div>
<div id="content"></div>
</div>
</body>

的CSS：

body  {
 margin: 0; 
 padding: 0; 
}
#header {
 height:200px;
 background-color:#666;
}
#blockleft {
 width:100px;
 height:500px;
 margin-top:10px;
 background-color:#090;
 float:left;
}
#blockright {
 width:100px;
 height:500px;
 margin-top:10px;
 background-color:#0F3;
 float:right;
}
#content {
 width:500px;
 height:2000px;
 background-color:#0CF;
 margin:auto;
}
.container {
 width:800px;
 margin:auto;
}
.sticky {
 position: fixed;
 top: 0;
}

脚本在一个div上运行正常，但是当使用脚本两次时，它会自动将右侧div移动到左侧，而这个不会粘在页面顶部。

我希望有人可以帮我解决这个问题。

编辑：在新文档中重新创建问题

Answer 1

由于div在我们制作float时失去position:fixed属性，因此它们彼此重叠。为了使它们处于适当位置，我们需要对right应用div距离。要解决此问题，请按以下步骤替换脚本代码。

<script type="text/javascript">
 function sticky_relocate() {
  var containerWidth = $(".container").outerWidth(true);
  var window_top = $(window).scrollTop();
  var div_top = $('#sticky-anchor').offset().top;
  if (window_top > div_top)
  {
    $('#blockleft').addClass('sticky');
    $('#blockright').addClass('sticky');
    $('#blockright').css("right", (containerWidth-800)/2 + "px");
    }
  else
  {
    $('#blockleft').removeClass('sticky');
    $('#blockright').removeClass('sticky');
    }
  }
 $(function() {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
  });
</script>

代码$('#blockright').css("right", (containerWidth-800)/2 + "px");计算右div的正确距离值，并在滚动时将css属性right:XXXpx添加到div。代码var containerWidth = $(".container").outerWidth(true);使用div值获取容器margin的宽度（因为margin生成auto，我们需要确定的数字进行计算）

滚动过去后，使两个div粘在页面顶部

1 个答案: