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

标签： css

Answer 1

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

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

要解决此问题，您可以覆盖其 CSS。要定位您的父母div，#sidebar只需执行以下操作：

div > #sidebar {
  position: static;
}

上面的代码针对div具有#sidebar子元素的元素。您可以将其更改position为除绝对、相对、粘性或固定之外的任何内容。更多关于 CSS 定位的信息在这里。

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