Question

无论我尝试什么，我都无法在测试网页上获得图像滚动显示的粘性。在这里：https://www.varamedia.be/website-laten-maken/restaurants/。我希望笔记本电脑中的人物在其他内容上滚动时保持粘性。

这是一个Wordpress网站，我还注意到了一些奇怪的东西，即CSS显然无法识别粘性CSS。错误消息为：“预期（静态|相对|绝对|固定），但发现'粘滞'。”这是它的图像：https://www.varamedia.be/wp-content/uploads/2019/01/sticky.png

我真的很感谢对此的任何反馈。非常感谢您分享您的想法。

我阅读了所有可以接触到的文章，尝试了可以在网上找到的文档中提出的所有建议解决方案，但对我来说效果并不理想。图片拒绝变粘。

我尝试使用ID，类，与溢出一起玩：隐藏；等但是我不知何故在这里。虽然感觉好像我在忽略一些细节，因为position：sticky; CSS功能看起来很简单，但显然不是：/

.stickyimage{ 
    position:sticky;
}

我们欢迎您根据对给定URL的检查提出任何建议。一千次感谢您的宝贵意见。

Answer 1

必须添加“顶部”或“底部”值。

body {
  margin:0;
}

p {
  font-size:36px;
  line-height:50px;
}

.nav {
  width:100%;
  background:orangered;
  height:60px;
  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 */
}

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates voluptatum cum optio a natus iste repellendus eaque at aut, voluptatibus sit veritatis quis quam magnam aspernatur, vero, sunt modi magni.</p>
<div class="nav">This a sticky nav</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, delectus! Beatae similique atque voluptas ipsam impedit blanditiis qui reprehenderit, nisi quas odio dolor? Quam rem magnam, deleniti quia itaque iusto.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis modi, debitis minima eveniet et illo laudantium, distinctio mollitia quaerat blanditiis quas. Quo doloribus illum neque. Unde labore ut perspiciatis nobis!</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, delectus! Beatae similique atque voluptas ipsam impedit blanditiis qui reprehenderit, nisi quas odio dolor? Quam rem magnam, deleniti quia itaque iusto.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis modi, debitis minima eveniet et illo laudantium, distinctio mollitia quaerat blanditiis quas. Quo doloribus illum neque. Unde labore ut perspiciatis nobis!</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, delectus! Beatae similique atque voluptas ipsam impedit blanditiis qui reprehenderit, nisi quas odio dolor? Quam rem magnam, deleniti quia itaque iusto.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis modi, debitis minima eveniet et illo laudantium, distinctio mollitia quaerat blanditiis quas. Quo doloribus illum neque. Unde labore ut perspiciatis nobis!</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, delectus! Beatae similique atque voluptas ipsam impedit blanditiis qui reprehenderit, nisi quas odio dolor? Quam rem magnam, deleniti quia itaque iusto.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis modi, debitis minima eveniet et illo laudantium, distinctio mollitia quaerat blanditiis quas. Quo doloribus illum neque. Unde labore ut perspiciatis nobis!</p>

Answer 2

您有2个问题。

问题1-您必须在位置：粘滞的元素上顶部，底部，左侧或右侧进行delcare。

问题＃2-您的父元素不能有溢出：隐藏。现在，body标签和html标签都具有以下内容...

overflow-x: hidden;
overflow-y: hidden;

删除这些...

您还需要确保stickyclass在正确的div上，并且希望在外部div上使用，在您的示例中，它应该在以下div上。

我对此进行了测试，并且可以正常工作。

Answer 3

@ dogukan-cavus感谢您的答复，您提供的代码在stackoverflow上效果很好。但是实际上，当我尝试将其添加到自己的自定义CSS中时，仍然没有任何变化。刚刚进行了所有更改。这是我下面使用的代码。我究竟做错了什么？再次感谢您的帮助。

body {
  margin:0 !important;
}
div.wpforms-container-full .wpforms-form .wpforms-field-label{
    color: #000 !important;
}

div.wpforms-container-full .wpforms-form .wpforms-field-label-inline {
    color: #000 !important;
}

.fotoraket {
    margin-top:-93px;
}

.varamedia-oranje{
font-family: 'Source Sans Pro', sans-serif;
    max-width: 719px;
      font-size: 100;
      letter-spacing: 3px;
    color:#f15a24;
}
.varamedia-poppins{
    font-family: 'Poppins', sans-serif;
      font-size: 100;
      letter-spacing: 3px;
    color:#f15a24;
}

.inner{
font-family: 'Poppins', sans-serif;
    font-weight:bold;
      letter-spacing: 3px;  
}
.innerregular{
font-family: 'Roboto', sans-serif;
      letter-spacing: 3px;  
}
@media screen and ( max-width: 500px ){
    h1{
        margin: 0 6px 0 6px;
    }
}
.ctafront{
    background-color:#f15a24;
    width:100%;
    overflow:hidden;
}
#dienstenfront{
    background-image: url(https://www.varamedia.be/wp-content/uploads/2018/12/wave-achtergrond-nieuw.png);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: background 0.3s,border 0.3s,border-radius 0.3s,box-shadow 0.3s;
}
#Over_Varamedia{
    margin-top:-5px;
}
.blog-oranje{
font-family: 'Source Sans Pro', sans-serif;
      font-size: 100;
      letter-spacing: 3px;
    color:#ffffff;
    background-color:#f15a24;
    background-size:contain;
    width:100%; 

}
.dima-footer{
    background-image:url(https://www.varamedia.be/wp-content/uploads/2018/12/achtergrondvragen-1.jpg);
    background-repeat: no-repeat;   
}

.div.wpforms-container-full .wpforms-form input[type=submit], div.wpforms-container-full .wpforms-form button[type=submit], div.wpforms-container-full .wpforms-form .wpforms-page-button {
    background-color: #ffffff;
    border: 2px solid #f15a24;
    color: #f15a24;

    font-size: 1em;
    padding: 10px 15px;
}
.div.wpforms-container-full .wpforms-form input[type=submit]:hover, div.wpforms-container-full .wpforms-form button[type=submit]:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button {

        background-color: #f15a24;
    border: 1px solid #ddd;
    color: #ffffff;

    font-size: 1em;
    padding: 10px 15px;
}
.bedanktpagina{
    background-image:url(https://www.varamedia.be/wp-content/uploads/2018/12/dkdkdkdkdd.png);

       background-repeat: no-repeat;
        background-size: cover;

}
.bedankt-image{
    border-radius:15px;
}
.stickyimage{
    width:100%;
  background:orangered;
  height:60px;
  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 */
}

粘性元素无响应。显然尚未记录的问题

3 个答案: