如何使用 CSS、HTML 和 jQuery 创建粘性标题？

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

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

使用 CSS、HTML 实现

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

JavaScript (jQuery) 的角色

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

HTML 代码

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

CSS 代码

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

jQuery 代码

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

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

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

扩展示例：动态触发点

如果修复元素的触发点未知，可以是使用 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>

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

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

以上是如何使用 CSS、HTML 和 jQuery 创建粘性标题？的详细内容。更多信息请关注PHP中文网其他相关文章！