1

ユーザーがこれらの div をスクロールした後、ページの上部に 2 つの div を固定しようとしました。両方の div は同じ高さに配置されます。これは、他のスタックオーバーフローの回答から使用しているものです。

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;
}

スクリプトは 1 つの div で正常に動作していますが、スクリプトを 2 回使用すると、右側の div が自動的に左側に移動し、これがページの上部に固定されません。

誰かがこれで私を助けてくれることを望んでいました。

編集：新しいドキュメントで問題を再現しました

4

1 に答える 1

0

を にすると s はプロパティをdiv失うので、両者は重なり合っています。それらをその位置に配置するには、右に距離を適用する必要があります。これを修正するには、スクリプト コードを次のように置き換えます。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 プロパティを追加します。コードはその値でコンテナの幅を取得します (が作成されているため、計算には明確な数が必要です)right:XXXpxdivvar containerWidth = $(".container").outerWidth(true);divmarginmarginauto

于 2012-12-12T08:51:21.243 に答える