Question

我有一段代码，当y-scoll超过765px时得到修复。问题在于，即使在其父级之外，此内容也将被修复。这是一个示例：https://jsfiddle.net/rwbsua3v/

如您所见，在继续滚动时，绿色框中的内容会固定，并且在滚动时会覆盖蓝色框。

如果我知道红色/绿色和蓝色框的确切高度，我可以解决此问题，但问题是它们可以任意长度。我将如何固定绿色框中的内容，直到其到达父级（绿色框）的底部，而又不影响y-scroll偏移和css top：87px？

这是我的代码：

window.onscroll = function() {
  myFunction()
};

var floating1 = document.getElementById("floating1");

var yOffset = 765;

function myFunction() {
  if (window.pageYOffset > yOffset) {
    floating1.classList.add("sticky");
  } else {
    floating1.classList.remove("sticky");
  }
}

table {
  width: 100%;
  min-height: 2000px;
}

table tr td {
  vertical-align: top;
}

.sticky {
  position: fixed!important;
  top: 87px;
}

<table>
  <tr>
    <td style="background: red; width: 200px;">
      ...
    </td>
    <td style="background: green; width: 200px;">
      <div id="floating1">
        Floating content
      </div>
    </td>
  </tr>
</table>
<div style="height: 1500px; background: blue;">
  ...
</div>

Answer 1

使用position: sticky将元素固定到位，直到遇到容器的边缘：

window.onscroll = function() {
  myFunction()
};

var floating1 = document.getElementById("floating1");

var yOffset = 765;

function myFunction() {
  if (window.pageYOffset > yOffset) {
    floating1.classList.add("sticky");
  } else {
    floating1.classList.remove("sticky");
  }
}

table {
  width: 100%;
  min-height: 2000px;
}

table tr td {
  vertical-align: top;
}

.sticky {
  position: sticky;
  top: 87px;
}

<table>
  <tr>
    <td style="background: red; width: 200px;">
      ...
    </td>
    <td style="background: green; width: 200px;">
      <div id="floating1">
        Floating content
      </div>
    </td>
  </tr>
</table>
<div style="height: 1500px; background: blue;">
  ...
</div>

Answer 2

这里是一个有用的小提琴：https://jsfiddle.net/17rn4qtw/2/。

我在浮动内容的父级中添加了{ items = [ ... ], nextToken = "a pagination token", scannedCount = 10 }，并使用Javascript来获取其高度。
我在函数中添加了第二个id="parent"子句，该子句仅在页面偏移量小于div内容高度时才修复浮动内容。

我还从父级的高度中减去了顶部像素，因此浮动内容在父级之外时消失了，不仅仅是父级不在窗口视图中时。

Answer 3

将一个类green添加到您的div中，并检查它何时结束。

window.onscroll = function() {myFunction()};

var floating1 = document.getElementById("floating1");

var yOffset = 765;

function myFunction() {
	if (window.pageYOffset > yOffset && window.pageYOffset < $('.green').height()) {
  	floating1.classList.add("sticky");
  } else if (window.pageYOffset > $('.green').height()) {
  	floating1.classList.remove("sticky");
  } else {
  	floating1.classList.remove("sticky");
  }
}

table {
  width: 100%;
  min-height: 2000px;
}

table tr td {
  vertical-align: top;
}

.sticky {
  position: fixed!important;
  top: 87px;
}

<table>
<tr>
  <td style="background: red; width: 200px;">
    ...
  </td>
  <td style="background: green; width: 200px;" class="green">
    <div id="floating1">
      Floating content
    </div>
  </td>
</tr>
</table>
<div style="height: 1500px; background: blue;">
  ...
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

https://jsfiddle.net/djkog8ft/

内容的固定位置，直到父级div结束

3 个答案: