如何在沒有 jQuery 的情況下使用 CSS 和 JavaScript 建立黏性標題？

修復滾動時的標題

當創建滾動時仍然可見的標題時，可以單獨使用 CSS 和 HTML 來實現此行為，而不需要 jQuery。

CSS 和HTML 解決方案

引入一個黏性標頭類別：

<code class="css">.sticky-header {
  width: 700px;
  height: 50px;
  background: orange;
  position: fixed;
}</code>

在HTML 中加入一個帶有「黏性」類別的div：

<code class="html"><div class="sticky"></div></code>

用於滾動事件的JavaScript

為了精確控制標題的固定，滾動事件需要JavaScript：

<code class="javascript">$(window).scroll(function() {
  var sticky = $('.sticky'),
    scroll = $(window).scrollTop();

  if (scroll >= 100) {
    sticky.addClass('fixed');
  } else {
    sticky.removeClass('fixed');
  }
});</code>

擴充範例

確定注視點根據黏性元素在螢幕上的位置，使用offset().top:

<code class="javascript">var stickyOffset = $('.sticky').offset().top;

$(window).scroll(function() {
  var scroll = $(window).scrollTop();

  if (scroll >= stickyOffset) {
    sticky.addClass('fixed');
  } else {
    sticky.removeClass('fixed');
  }
});</code>

以上是如何在沒有 jQuery 的情況下使用 CSS 和 JavaScript 建立黏性標題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！