將position:sticky添加到元素會導致滾動時出現跳躍行為

問題： 我有一個標題容器元素，它以 100vh 開始作為登錄頁面。當用戶滾動時，它應該將標題容器元素減小到 15vh 并將其粘貼到視窗的頂部。我基本上已經做到了，但是當用戶不滾動堆時，過渡不是很平滑并且會跳來跳去。

預期結果： 當用戶完全滾動時，它應該觸發標題元素的大小減小到 15vh，并以平滑過渡的方式粘在視窗頂部。

嘗試的事情：

• 向標題元素下方的元素添加額外的過渡。
• 將標題的初始位置更改為“絕對”
• 我沒有使用 position:sticky 添加一個類，而是嘗試使用 position:absolute 和 top:0px。
• 我看過這篇文章，但不確定如何將其應用于 mu 問題。

我試圖在下面用最少的代碼舉一個例子。

window.addEventListener(
  'scroll',
  function() {
    let scrollTop =
      window.pageYOffset ||
      (document.documentElement || document.body.parentNode || document.body)
      .scrollTop;
    getPosition();
    console.log(getPosition());
    if (getPosition() <= 0) {
      this.document.getElementById('title').classList.add('header');
    } else {
      this.document.getElementById('title').classList.remove('header');
    }
  },
  false
);

function getPosition() {
  element = document.getElementById('topTitleMarker');
  var clientRect = element.getBoundingClientRect();
  return clientRect.top;
}

.title {
  padding: 0;
  margin: 0;
  height: 100vh;
  font-weight: bold;
  font-family: 'Titillium Web', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: black;
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
  color: white;
}

.header {
  top: 0px;
  height: 15vh;
  position: sticky;
}

body {
  background-color: white;
  height: 500vh;
  -ms-overflow-style: none;
  scrollbar-width: none;
  border-bottom: 5px solid white;
  /*   overflow: hidden; */
}

.topTitleMarker {
  top: 1px;
  position: absolute;
}

.test {
  margin-top: 15vh;
}

<div id='title' class="title">TITLE</div>
<div id='topTitleMarker' class="topTitleMarker"></div>
<div class="test">TEST</div>

密碼筆

uj5u.com熱心網友回復：

問題

我認為滾動中的抖動是因為.topTitleMarker被參考為滾動元素的頂部，.getBoundingClientRect().top并且transition基于.title它在 100vh 時增加的高度，但在.title收縮時沒有過渡。此外，transition這是一個程序繁重的影片，但你的影片很簡單，所以不用擔心。

變化

JavaScript

• 已洗掉scrollTop- 它沒有被使用
• 移動并合并getPosition()到事件處理程式
• 還更改了.getBoundingClientRect().topfrom .topTitleMarkerto的參考元素<h1>（在 OP 中是.title）

CSS

• 已從transition_<h1>
• 添加animation: grow 1s forwards ease-out;到<h1>
• 添加animation: shrink 1s forwards ease-out;到.header
• 用于更平滑的影片animation，@keyframes用于縮小和增長<h1>

HTML

• 從 OP 中洗掉了所有內容并添加了一個<h1>

window.addEventListener('scroll', headerHeight);

function headerHeight(event) {
  const title = document.querySelector('h1');
  if (title.getBoundingClientRect().top <= 0) {
    title.classList.add('header');
  } else {
    title.classList.remove('header');
  }
};

@import url('https://fonts.googleapis.com/css2?family=Titillium Web:wght@300;700&display=swap');

html {
  font: 300 2ch/1.25 'Titillium Web';
}

body {
  height: 500vh;
}

h1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-weight: 700;
  color: white;
  background-color: black;
  animation: grow 1s forwards ease-out;
}

.header {
  position: sticky;
  top: 0px;
  height: 15vh;
  animation: shrink 1s forwards ease-out;
}

@keyframes grow {
  0% {
    height: 15vh
  }
  100% {
    height: 100vh
  }
}

@keyframes shrink {
  0% {
    height: 100vh
  }
  100% {
    height: 15vh
  }
}

<h1>TITLE</h1>

標籤：javascript html css

上一篇：如何更新Firestore欄位以賦予其空值（未定義或null）？

下一篇：如何通過連接目標路由中的變數來匯入模塊？