1

在用户滚动过去这些 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 移动到左侧，而这个不会粘在页面顶部。

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

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

4

1 回答 1

0

由于s在我们制作时div失去了属性，因此它们都相互重叠。为了使它们处于它们的位置，我们需要为 right 应用距离。要解决此问题，请按如下方式替换您的脚本代码。floatposition:fixedrightdiv

<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 属性。代码用它的值来获取容器的宽度（由于是 made ，我们需要确定的数字来计算）right:XXXpxdivvar containerWidth = $(".container").outerWidth(true);divmarginmarginauto

于 2012-12-12T08:51:21.243 回答