CSS位置的拾取高度：粘性

Question

我使元素具有粘性，但我没有定义元素应保持粘性的区域。我没有选择当前区域，但是当我应用position：sticky时自动定义了当前区域。显然，我想完全控制我的粘性元素用作活动区域的空间，并且我想精确地选择元素在滚动过程中必须停在的位置。

该元素在应该保持粘性的地方使用了大约50％的空间。

以下是相关网址：https://www.varamedia.be/website-laten-maken/restaurants/

我从Google营销平台销售页面中得到了启发。在这里，您会看到我尝试复制的相同行为：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。要定位div的父#sidebar，只需执行以下操作：

div > #sidebar {
  position: static;
}

上面的代码将div元素作为子元素的#sidebar元素作为目标。您可以将其position更改为绝对，相对，粘性或固定以外的任何值。有关CSS定位here的更多信息。

这里的关键要点是，如果要动态放置元素，请确保其父元素处于静态位置，以避免意外行为。