即使在滚动时如何在用户视图中显示叠加图？

Question

即使滚动到底部，我也要弹出电影概述。 目前，它仅在我位于页面顶部时才起作用。 我尝试过粘性，但是没有用。

我希望它显示在屏幕中间或用户能够看到的位置。当我位于页面底部时，概述仍会在页面顶部弹出，位于用户视图之外。

它在这里起作用（在顶部）：

在这里不起作用：

.bg {
  background-image:url("../../assets/top.jpg");
  height: 49em;
  width: 103em;
}

.result{
  display: grid;
  grid-gap: 20px;
  grid-template-columns: auto auto auto auto;
  background-color: Ivory;
  padding: 10px;
}

.img{
    border-width:5px;
    width:220px;
    height:300px;
    transition: .5s ease;
    backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container:hover .img {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {
    background-color: #4CAF50;
    color: white;
    font-size: 16px;
    padding: 16px 32px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;

}

.title{
    background-color: Beige ;
    font-size:25px;
    color:DarkOrange;
    font-weight:bold;
    width:300px;
    border: 1px solid gray;
    border-radius: 5px;
    text-align:center;
}

.date{
    font-size:12px;
    color:DodgerBlue;
}

<div *ngIf="!_search.movies" class="bg"></div>
<div class="result" *ngIf="_search.movies">
    <div *ngFor="let movie of _search.movies.results">
        <div class="title">{{ movie.title }}<br>
            <div class="container">
                <img class="img" src="{{ _search.imgUrl }}{{ movie.poster_path }}">
              <div class="middle">
                    <div class="text">{{ movie.overview }}</div>
              </div>
              </div>
                <div class='date' >Release Date: {{ movie.release_date }}
            </div>    
        </div>
    </div>    
</div>

Answer 1

要在电影盒中显示说明，您必须在“ .title”类上添加position: relative，例如

.title{
    position: relative; /* new line */
    background-color: Beige ;
    font-size:25px;
    color:DarkOrange;
    font-weight:bold;
    width:300px;
    border: 1px solid gray;
    border-radius: 5px;
    text-align:center;
}