Question

我在容器中有一个固定的块元素。滚动时，固定位置的元素将超出容器。我了解固定元素将根据窗口vw定位。但是有什么方法可以确保固定位置的元素只滚动到容器位置。固定位置元素不应超出容器

问题可以在下面看到。

我尝试使用以下方法解决此问题：

if($(window).scrollTop()>1900){
    $('.fixed-ct').css({'bottom':'200px','top':'auto'});
}else if($(document).scrollTop() <=100) {
    $('.fixed-ct').css({'top':'10px','bottom':'auto'});
}else {
    $('.fixed-ct').css({'top':'0px','bottom':'auto'});
}

但是有时固定容器由于底部200px而在末尾，因此在滚动时应该使用top：0px在顶部，并且应该在容器本身内部。

Answer 1

您可以在.fixed-ct内使用粘性位置，并添加相对于.main-ct的位置：

.main-ct {
  width: 1000px;
  height:600px;
  border: 1px solid #000;
  position:relative;
}
.fixed-ct {
  position: sticky;
  width:100px;
  height:20px;
  background: red;
  top:10px;
}
.like-body {
  width: 100%;
  height:1300px;
}

<div class="like-body">
  <div class="main-ct">
    <div class="fixed-ct"></div>
  </div>
</div>

Answer 2

CSS位置固定属性不能由其父元素操作，这与浏览器的视口有关。所以您可以尝试一下。

*body {
  margin: 0;
  padding: 0;
  outline: 0;
}

.container {
  width: 700px;
  margin: 0px 100px 0px 100px;
  padding-bottom: 2000px;
}

.main {
  width: 450px;
  height: 450px;
  background: rgba(228, 174, 201, .5);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow-y: scroll;
  position: absolute;
}

.header-fixed {
  background: rgba(255, 0, 0, 0.404);
  height: 50px;
  width: 450px;
  top: 0;
  position: sticky;
}

.body p {
  padding: 0px 20px 1000px 20px;
  text-align: justify;
  font-size: 20px;
  line-height: 40px;
}

.contact {
  background: rgba(12, 146, 236, 0.3);
  bottom: 20px;
  left: 300px;
  position: sticky;
  display: inline;
  padding: 10px;
  border-radius: 5px;
}

<div class="container">
  <div class="main">
    <div class="header-fixed"></div>
    <div class="body">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab voluptas est repellendus entore sit quaerat ratione architecto quos molesti a quis nisi! Veniam cum hic cumque?</p>
      <h2 class="contact">Call Now!</h2>
    </div>
  </div>
</div>

固定位置元素仅在div容器内

2 个答案: