Question

当我使用固定位置时，它将转到整个页面的顶部-而不是当前页面的视口。因此，如果我滚动到页面中间并触发弹出窗口，我希望固定的覆盖层停留在浏览器窗口的顶部：

点击观看视频： https://getfarmacy.com/collections/frontpage/products/morning-routine

请帮助！

我尝试过：0；位置：固定； -webkit-transform：none！important;

，它不起作用。请注意，这是shopify和tachyons。

//Video 
// Initiate FitVid.js
$(".video-container").fitVids();

// Iframe/player variables
var iframe = $('#video')[0];
var player = $f(iframe);

// Open on play
$('.play').click(function() {
  //$("body").addClass("is-visible");
  $('.overlay').css('left', 0)
  $('.overlay').addClass('show')
  player.api("play");
})

// Closes on click outside
$('.overlay').click(function() {
  $('.overlay').removeClass('show');
  $("body").removeClass("is-visible");
  setTimeout(function() {
    $('.overlay').css('left', '-100%')
  }, 300);
  player.api("pause");
})

  .overlay {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, .5);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0;
  left: -100%;
  transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1);
  visibility: visible;
  z-index: 1;
  transform: none;
  -webkit-transform: none !important;
}

.video-container {
  width: 100vw;
  height: 100vh;
  top: 0;
  position: absolute;
  transform: none;
  -webkit-transform: none !important;
}

.close {
  width: 20px;
  fill: white;
  position: absolute;
  right: 0;
  /* Bring above video */
  top: -30px;
}

.close:hover {
  /* 50% opacity white */
  fill: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}


/* Class to fade in overlay */

.show {
  opacity: 1;

<section id="module-video" class="video db w-100 mv5 relative">
  <div class="db tc" data-aos="fade-in">
    <h1 class="f3 db w-100 mt4 mb4-l mb2">{{ block.settings.product_video_title }}</h1>
    <div class="db tc mw8 center flex items-end justify-center">
      {% if block.settings.product_video_image %}
      <img class="w-100" src="{{ block.settings.product_video_image  | img_url: '972x469' }}"> {% else %}
      <img class="w-100" src="{{ 'video.jpg' | asset_url }}"> {% endif %}
      <span class="play mb5 white fw1 flex items-center justify-center ttu  absolute bottom-1"><img class="pr3" src="{{ 'play.svg' | asset_url }}">View Video</span>
    </div>
  </div>

  <div class="overlay">
    <div class="video-container">
      <!-- SVG Close (X) Icon -->
      <svg class="close" xmlns="http://www.w3.org/2000/svg" viewBox="39.2 22.3 25 24.5"><path d="M39.5,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4l10.3-10.3L62,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4c0.5-0.5,0.5-1.3,0-1.8L53.5,34.3l9.8-9.8c0.5-0.5,0.5-1.3,0-1.8c-0.5-0.5-1.3-0.5-1.8,0l-9.8,9.8l-9.8-9.8c-0.5-0.5-1.3-0.5-1.8,0c-0.5,0.5-0.5,1.3,0,1.8l9.8,9.8L39.5,44.6C39,45.1,39,45.9,39.5,46.4z"/></svg>

      <!-- Embedded video -->
      <iframe id="video" src="https://player.vimeo.com/video/29544927?api=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
  </div>
</section>



}

Answer 1

快速解决方案只是将标头的高度偏移.overlay上的最高值。您的情况：81px;

.overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: -81px; /* hack, fix, it gets the job done */
}

但是，我在查看文档时发现了这一点。实际的问题是您将transform: translate3D设置为.page-container。如果删除转换，（孩子的）固定位置的问题就消失了。

文档： Types of positioning

绝对定位元素是其计算的位置值是绝对值或固定值的元素。 top，right，bottom和left属性指定距元素包含块的边缘的偏移量。（包含块是元素相对于其放置的祖先。）如果元素具有边距，则将它们添加到偏移量中。

好吧，让我们看看它对containing block的看法：

如果position属性是绝对的或固定的，则包含块也可以由最近的祖先元素具有以下内容的填充框的边缘形成：


没有变换（这是我们的家伙）以外的变换或透视值

Identifying the containing block

固定位置不在当前页面视图的顶部

1 个答案: