Question

我试图将解决方案修改为＆＃34;粘贴＆＃34; this article中显示的旧浏览器元素。

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

这很好，但是我努力让解决方案在我的页面上运行，因为我试图在两列布局中修复右手div。即使它将宽度设置为与粘性相同，菜单也会跳到左侧，并且＃34;粘贴＆＃34;。

右侧列的位置如下：

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

你设置＆＃34;占位符＆＃34;的宽度似乎没有任何区别。要素。

有fiddle to show the issue here。

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

Answer 1

正如我在上面评论的那样，您需要调整宽度，以便它可以与静态和固定位置一起使用（您可以使用vw单位）。特别是当元素的容器不是100％宽度时，40％可能表现不同。

然后你应该添加right:17px（滚动的宽度）。在您的情况下，right:17px与position:fixed结合使用的行为与float:right相同。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

getComputedStyle(menu).width和getComputedStyle(menu).height会为您提供粘性元素的实际尺寸。确保将objects类添加到占位符中，并将其放置在与原始对象相同的位置。

Answer 3

我相信position：fixed属性依赖于你使用top，right等指定元素在包含块内的位置。将“right”（fe right：0）值与.fixed的“top”一起指定应该有效。< / p>

https://developer.mozilla.org/en-US/docs/Web/CSS/position

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

3 个答案: