如何使用 CSS 和 JavaScript 在滚动上创建固定标题？

使用 CSS 和 JavaScript 在滚动上创建固定标题

在这种情况下，我们的目标是创建一个固定的标题并保留在

CSS 和 HTML 方法

仅使用 CSS 和 HTML 不足以实现此功能。仅 CSS 无法提供将元素附加到特定滚动位置的解决方案。

JavaScript 集成

要修复滚动上的标题，需要 JavaScript 来进行事件处理。以下步骤概述了解决方案：

1. 定义固定位置类：

   <code class="css">.fixed {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
   }</code>

2. 分配滚动上的类：

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

   这里，当滚动位置超过 100 像素时，'fixed' 类将添加到 '.sticky' 元素，将其固定到位。

示例：

以下 HTML 代码定义固定标头：

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

演示：

[Fiddle 演示](https://jsfiddle.net/gxRC9/501/)

扩展示例：

如果触发点应该发生当粘性元素到达屏幕顶部时，我们可以使用 offset().top:

<code class="javascript">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>

扩展演示:

[扩展 Fiddle 演示]( https://jsfiddle.net/gxRC9/502/)

以上是如何使用 CSS 和 JavaScript 在滚动上创建固定标题？的详细内容。更多信息请关注PHP中文网其他相关文章！