css - CSS位置拾取高度:sticky

Question

我已将一个元素设置为粘性，但我没有定义元素应保持粘性的区域。当前区域不是我选择的，而是在我应用 position:sticky 时自动定义的。显然，我想完全控制我的粘性元素用作事件区域的空间，并且我想精确地选择元素在滚动过程中必须停止的位置。

该元素使用了它应该保持粘性的大约 50% 的空间。

这是有问题的网址:https://www.varamedia.be/website-laten-maken/restaurants/

我的灵感来自谷歌营销平台的销售页面。在这里您会看到我试图复制的相同类型的行为:https://marketingplatform.google.com/about/enterprise/

可能我在这里遗漏了一些东西...非常感谢您提供的任何帮助。

我通读了 SO 但没有找到这个问题的正确答案，因此新线程。

这是我在 WP 子主题 style.css 文件中添加的自定义 CSS:

.stickyimage{
    width:100%;
  background:orangered;
  height:0px;
  font-size:24px;
  color:#fff;
  text-align:center;
  line-height:60px;
  /*following codes is for sticky */
  position:sticky;
  top:0; /* it's up to you */
}

body {
    direction: ltr;
    color: #a1a1a1;
    background-color: #FFFFFF;
    line-height: 24px;
    background-repeat: repeat;
    background-attachment: fixed;
    overflow-x: visible;
    overflow-y: visible;
    background-position: 0 0;
    letter-spacing: 0.01em;
    word-spacing: 0.01em;
}

Answer 1

如果您仍在为此苦苦挣扎，我检查了您的网页，可能已经发现了问题。

问题出在#sidebar 的父容器中，它的position: relative 导致了意外行为。

要解决此问题，您可以覆盖其 CSS。要定位 #sidebar 的父级 div，您可以简单地执行以下操作:

div > #sidebar {
  position: static;
}

上面的代码针对 div 元素，这些元素有一个 #sidebar 元素作为子元素。您可以将其 position 更改为绝对、相对、粘滞或固定以外的任何位置。有关 CSS 定位的更多信息 here .

这里的关键要点是，如果您想动态定位一个元素，请确保其父元素是静态定位的，以避免出现意外行为。