如何使用 CSS 和 JavaScript 将标题固定在页面顶部？

如何使用 CSS 和 JavaScript 创建粘性标题

问题：

设计一个标题，一旦用户滚动经过页面上的特定点。是否可以使用 CSS 和 HTML 来实现此目的，还是需要 JavaScript？

使用 CSS 和 JavaScript 的解决方案：

要使用 CSS 和 JavaScript 创建粘性标题，请按照以下步骤操作：

1. HTML: 添加
   具有“sticky”类的元素到要显示标题的页面。

2. CSS: 定义一个名为“fixed”的 CSS 类，具有以下属性：

   • 位置：固定；
   • 顶部：0；
   • 左：0；
   • 宽度：100%；

3. JavaScript (jQuery): 使用以下 JavaScript 代码将滚动事件处理程序附加到窗口对象：

   <code class="js">$(window).scroll(function() {
     var sticky = $('.sticky'),
         scroll = $(window).scrollTop();
   
     if (scroll >= 100) {
       sticky.addClass('fixed');
     } else {
       sticky.removeClass('fixed');
     }
   });</code>

扩展示例：

如果粘性标题的触发点未知，可以使用 .offset().top 方法来确定粘性元素何时到达屏幕顶部。这是更新后的 JavaScript 代码：

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

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

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

示例小提琴：

• 基本示例：http://jsfiddle.net/gxRC9/501/
• 扩展示例：http://jsfiddle.net/gxRC9/502/

这种方法允许您使用 CSS 和 JavaScript 的组合创建粘性标题，使其跨浏览器兼容且相对容易实现。