javascript - CSS - 添加一个额外的 div 使其他元素跳到左边

Question

我正在尝试修改 this article 中针对旧版浏览器的“粘性”元素的解决方案。 .

本质上，它是通过添加一些 javascript 代码来监听滚动事件来工作的。当检测到一个时，它会将 position: fixed 放在“粘性”上，以确保它在用户滚动时保持在原位。为了防止元素跳出页面流，它在固定元素之前添加了一个相同大小的 div。

这一切都很好，但我正在努力使解决方案在我的页面上起作用，因为我正在尝试修复两列布局中的右侧 div。即使将宽度设置为与粘性相同，菜单在“粘性”时也会跳到左侧。

右侧的列放置了以下类:

.objects {
    margin: 10px 30px;
    float: right;
    display: inline-block;
    text-align: center;
    top: 30px;
    width: 40%;
}

.objects .content-block {
  margin: 0px;
  width: 100%;
}

<div class="objects" id="sticky">
    <div class="content-block">
    </div>
</div>

javascript代码是:

var menu = document.querySelector('#sticky');
var menuPosition = menu.getBoundingClientRect();
var placeholder = document.createElement('div');
placeholder.style.width = menuPosition.width + 'px';
var isAdded = false;

document.getElementById("content").addEventListener('scroll', function() {
  if (document.getElementById("content").scrollTop >= menuPosition.top && !isAdded) {

    menu.classList.add('sticky');
    menu.parentNode.insertBefore(placeholder, menu);

    isAdded = true;
  } else if (document.getElementById("content").scrollTop < menuPosition.top && isAdded) {

    menu.classList.remove('sticky');
    menu.parentNode.removeChild(placeholder);

    isAdded = false;
  }
});

将“占位符”元素的宽度设置为什么似乎没有任何区别。

有一个 fiddle to show the issue here .

我需要在我的 CSS 中更改什么才能使元素保留在右侧列中的位置？

Answer 1

正如我在上面评论的那样，您需要调整宽度，以便它可以与静态和固定位置相同(您可以使用 vw 单位)。 40% 两者的行为可能不同，尤其是当元素的容器不是 100% 宽度时。

然后你应该添加right:17px(滚动的宽度)。 right:17px 与 position:fixed 的组合将具有与您的情况下的 float:right 相同的行为。

var menu = document.querySelector('#sticky');
var menuPosition = menu.getBoundingClientRect();
var placeholder = document.createElement('div');
var isAdded = false;

document.getElementById("content").addEventListener('scroll', function() {
  if (document.getElementById("content").scrollTop >= menuPosition.top && !isAdded) {

    menu.classList.add('sticky');
    menu.parentNode.insertBefore(placeholder, menu);

    isAdded = true;
  } else if (document.getElementById("content").scrollTop < menuPosition.top && isAdded) {

    menu.classList.remove('sticky');
    menu.parentNode.removeChild(placeholder);

    isAdded = false;
  }
});

.drop-table {
    display: inline-block;
    width: 45%;
}

.objects {
    margin: 10px 30px;
    float: right;
    display: inline-block;
    text-align: center;
    top: 30px;
    width: 40vw;
    right:17px;
}

.objects .content-block {
  margin: 0px;
  width: 100%;
}
        
#content {
    position: fixed;
    top: 40px;
    bottom: 80px;
    left: 0;
    right: 0;
    background-color: white;
    overflow: auto;
	  z-index: 4;
}

 .sticky {
    top: 40px;
    position: fixed; 
}

<div id="content">
<div>

        <div class="content-block drop-table">
        <ul>
          <li>AAA</li>
          <li>AAA</li>
          <li>AAA</li>
          <li>AAA</li>
          <li>AAA</li>
          <li>AAA</li>
          <li>AAA</li>
          <li>AAA</li>
          <li>AAA</li>
          <li>AAA</li>
          <li>AAA</li>
          <li>AAA</li>
          <li>AAA</li>
          <li>AAA</li>
          <li>AAA</li>
          <li>AAA</li>
        </ul>
        </div>
        <div class="objects" id="sticky">
            <div class="content-block">
                <div>
                    Assign
                </div>
            </div>
        </div>
        </div></div>