javascript - 将 div 更改为绝对位置时，它会跳转到原始位置

Question

我目前正在尝试在屏幕右侧制作一个 float 表格，同时在左侧放置其他内容。

使用 bootstrap class="col-md-6 分隔左右列。

让表格 float 很容易，但我希望它停止 float 在左侧 div 的底部。

我遵循了本教程 https://stackoverflow.com/a/8653109/9364403

当我的 float div 到达 div 的底部时，它会更改为 position:absolute;。

但是当position设置为absolute时，表格会回到div顶部的位置，不会停留在底部。当我向上滚动一点时，表格又回到 float 状态。

如何确保 float 的 div 不会像上面显示评论链接的 jsfiddle 那样跳回？ ( http://jsfiddle.net/Kkv7X/ )

当前 html:

<div class="container">
  <div class="row" id="">

    <div class="col-md-6">
    Content for the left hand column
    </div>

    <div class="col-md-6" style="position:relative;">
      <div class="positionfixed" id="fixedcard">
        <table class="table" id="recipetable">
          <tr class="tablerow">
            <th class="tableheader" style="width:45%;">header 1</th>
            <th class="tableheader" style="width:25%;">header 2</th>
            <th class="tableheader" style="width:30%;">header 3</th>
            <th class="tableheader" style="width:30%;">header 4</th>
          </tr>
          <tr class="tablerow">
            <td>row 1</td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr class="tablerow">
            <td>row 2</td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr class="tablerow">
            <td>row 3</td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr class="tablerow">
            <td>row 4</td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr class="tablerow" id="TableTotalRow">
            <td>row 5</td>
            <td ></td>
            <td ></td>
            <td ></td>
          </tr>
        </table>
      </div>
    </div>

  </div>
</div>
<div id="stop">
</div>

当前代码:

function checkOffset() {
    if($('#fixedcard').offset().top + $('#fixedcard').height() >= $('#stop').offset().top - 10){
      $('#fixedcard').css('position', 'absolute');
    }
    if($(document).scrollTop() + window.innerHeight < $('#stop').offset().top){
      $('#fixedcard').css('position', 'fixed'); // restore when you scroll up
    }
  }
  $(document).scroll(function() {
    checkOffset();
  });

当前的CSS:

 .positionfixed{
    position: fixed;
  }

我制作了一个 jsFiddle 来记录我的代码目前在这里做什么:https://jsfiddle.net/fjfkbrtn/12/

谢谢。

Answer 1

当您更改为 absolute 时，只需将 bottom CSS 属性设置为 0px 并在位置返回到 fixed 时将其更改回来，例如所以:

function checkOffset() {
  if ($('#fixedcard').offset().top + $('#fixedcard').height() >= $('#stop').offset().top - 10) {
    $('#fixedcard').css('position', 'absolute');
    $('#fixedcard').css('bottom', '0px'); // ADD THIS
  }
  if ($(document).scrollTop() + window.innerHeight < $('#stop').offset().top) {
    $('#fixedcard').css('position', 'fixed'); 
     $('#fixedcard').css('bottom', 'initial'); // AND THIS 
  }
}
$(document).scroll(function() {
  checkOffset();
});