使用 CSS、HTML 和 jQuery 修复滚动上的标题

创建一个在页面向下滚动时保持固定的标题是共同的设计要求。这可以使用 CSS、HTML 和 JavaScript (jQuery) 的组合来实现。

使用 CSS 实现，HTML

CSS 提供了位置：固定；属性，可以应用于元素以固定其在页面上的位置，无论滚动如何。然而，这需要一个触发点来确定元素何时应该固定。

JavaScript 的角色 (jQuery)

需要 JavaScript 来监视滚动事件并决定何时将固定类应用于标头元素。使用 jQuery，可以编写一个简单的脚本来检测滚动事件并相应地添加或删除固定类。

HTML 代码

CSS代码

.fixed {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
}

jQuery 代码

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

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

在此示例中，当滚动位置 (scrollTop) 超过 100 像素时，固定类将应用于粘性元素。您可以根据您的具体设计需求调整该值。

扩展示例：动态触发点

如果固定元素的触发点未知，可以使用 offset().top.

var stickyOffset = $('.sticky').offset().top;

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

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

此代码动态测量粘性元素的垂直位置，并在其到达视口顶部时对其进行修复。

通过结合这些技术，您可以使用以下方法创建粘性标题CSS、HTML 和 jQuery。