Question

我有一个有趣的问题。 CSS属性位置（固定值）应该相对于浏览器窗口。然而，不知何故，在这个代码中，当滚动时它坚持绝对的父。怎么样和为什么？

HTML：

<section>
  <div class="container">
    <div class="wrapper">
      <div class="content">
      <div class="bar">      
      </div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a quam ultrices libero convallis consequat eget non eros. Proin in velit ullamcorper, tristique leo id, tempus ipsum. Mauris in nisl at tortor vulputate dictum. Morbi at leo non ante euismod gravida ut sit amet massa. Suspendisse potenti. Fusce nec ultricies arcu. Sed at nunc turpis. Vivamus suscipit eu mi mollis tempor. Nullam ut urna libero. Duis finibus egestas erat, non faucibus sem placerat a. Curabitur sollicitudin porttitor urna, a eleifend diam ultrices non. Praesent lacus lectus, volutpat scelerisque lacus quis, vehicula eleifend dui. Praesent eget est magna. Sed faucibus tellus diam, commodo ultricies ipsum pulvinar et. Phasellus nec blandit tortor, eget facilisis tellus. Nulla vitae ornare neque.
      </div>
    </div>
  </div>
</section>
<section>
  <div class="container">
    <div class="wrapper">
      <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a quam ultrices libero convallis consequat eget non eros. Proin in velit ullamcorper, tristique leo id, tempus ipsum. Mauris in nisl at tortor vulputate dictum. Morbi at leo non ante euismod gravida ut sit amet massa. Suspendisse potenti. Fusce nec ultricies arcu. Sed at nunc turpis. Vivamus suscipit eu mi mollis tempor. Nullam ut urna libero. Duis finibus egestas erat, non faucibus sem placerat a. Curabitur sollicitudin porttitor urna, a eleifend diam ultrices non. Praesent lacus lectus, volutpat scelerisque lacus quis, vehicula eleifend dui. Praesent eget est magna. Sed faucibus tellus diam, commodo ultricies ipsum pulvinar et. Phasellus nec blandit tortor, eget facilisis tellus. Nulla vitae ornare neque.
      </div>
    </div>
  </div>
</section>

CSS：

section {
    width: 100%;
    display: block;
    max-width: none;
    height: 100vh !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
}

section .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

section .wrapper {
    max-width: 770px;
    margin: 0 auto 50px;
    text-align: center;
    padding: 0 25px 50px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.bar {
  display: block;
  width: 100%;
  height: 30px;
  background: #00aeef;
  margin-bottom: 40px;
}

.bar.fixed {
  position: fixed;
  top: 0;
}

jQuery的：

$(window).scroll(function() {
    var scrollPos = $(document).scrollTop();
    if(scrollPos > $('.bar').offset().top) {
        $('.bar').addClass('fixed');
    } else {
  $('.bar').removeClass('fixed');
}
}).scroll();

https://jsfiddle.net/bg6cqcfp/1/

Answer 1

好吧，看来转换属性在这里有问题。

transform: translate();

在使用Google使用不同的关键字后，我设法找到了类似的问题。从父绝对元素中删除它们后，问题就消失了。怪异。

定位固定棒到父绝对

1 个答案: