更改为固定定位时，标题会略微移动

Question

我有一个页面标题，只要用户在滚动中传递它就会滚动它。我使用position: absolute执行此操作，并在达到它时将其切换为position: fixed。我遇到的问题是，当元素转向position: fixed时，它会略微跳跃，使转换真正引人注目。我该如何防止这种情况？

这是小提琴：https://jsfiddle.net/v1zf1g2L/4/

在小提琴中我使用了许多变换，这样做就可以使标题可以逃避它所在的网站上的包含元素（我无法改变的东西）。 我试过让attach类使用与header类相同的转换样式，只是改变位置，但这会导致与我的另一个元素发生冲突，这意味着这种方法对我的使用不起作用。

.header {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  width: 100vw;
  z-index: 999;
  background-color: blue;
}

.attach {
  position: fixed;
  -webkit-transform: none;
  transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  left: 0;
  width: 100vw;
  background-color: red;
}

Answer 1

这是你需要的吗？

＆＃13;

＆＃13;

   function checkScroll() {
     if ($(window).scrollTop() > 0) {
       $("#header").addClass("attach").css("top", "0");
     } else {
       $("#header").removeClass("attach").css("top", "0");
     }
   }

   $(window).scroll(function() {
     checkScroll();
   })

＆＃13;

.header {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  width: 100vw;
  z-index: 999;
  background-color: blue;
    transition:all .4s linear;
    top:0;
}

.attach {
  position: fixed;
  -webkit-transform: none;
  transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  left: 0;
  width: 100vw;
  background-color: red;
  transition:all .4s linear;
}
.content  { padding-top:110px; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header" class="header">
  <img src="http://i.imgur.com/00I8dSr.png" style="width: 200px" />
</div>

<div class="content">
  <p>
    blah 1
  </p>
  <p>
    blah
  </p>
  <p>
    blah
  </p>
  <p>
    blah
  </p>
  <p>
    blah
  </p>
  <p>
    blah
  </p>
  <p>
    blah
  </p>
  <p>
    blah
  </p>
  <p>
    blah
  </p>
  <p>
    blah
  </p>
  <p>
    blah
  </p>
  <p>
    blah
  </p>
  <p>
    blah
  </p>
  <p>
    blah
  </p>
  <p>
    blah
  </p>
  <p>
    blah
  </p>
  <p>
    blah
  </p>
  <p>
    blah
  </p>
  <p>
    blah
  </p>
  <p>
    blah
  </p>
  <p>
    blah
  </p>
  <p>
    blah
  </p>
  <p>
    blah
  </p>
  <p>
    blah
  </p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我只是稍微调整了一下！你必须确保两者都在顶部和左侧！

在这里你有： https://jsfiddle.net/w487771f/

function checkScroll() {
  if ($(window).scrollTop() > 0) {
    $("#header").removeClass("header");
    $("#header").addClass("attach");
  } else {
    $("#header").removeClass("attach");
    $("#header").addClass("header");
  }
}

$(window).scroll(function() {
  checkScroll();
})


.header {
  position: absolute;
  -webkit-transform: none;
  transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  top: 0;
  left: 0;
  width: 100vw;
  background-color: blue;
  z-index: 999;
}

.attach {
  position: fixed;
  -webkit-transform: none;
  transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  left: 0;
  top: 0;
  width: 100vw;
  background-color: red;
  z-index: 999;
}

Answer 3

嗨，你可以像这些一样使用

JS

 $("#header").addClass("attach");
$("#header").removeClass("attach");