粘性标题可以使网页更具吸引力，因为当用户向下滚动时，标题始终可见。以下是一个示例代码，用于实现粘性标题的JavaScript功能：

CSS：

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

JavaScript:

const stickyHeader = () => { const header = document.querySelector('header'); const headerHeight = header.offsetHeight; const headerTop = header.offsetTop;

const scrollHandler = () => { if (window.pageYOffset >= headerTop) { header.classList.add('sticky'); document.body.style.paddingTop = ${headerHeight}px; } else { header.classList.remove('sticky'); document.body.style.paddingTop = "0"; } };

window.addEventListener('scroll', scrollHandler); };

stickyHeader();

在上述代码中，我们首先创建了一个类名为“sticky”的CSS类，并将其设置为固定位置，顶部为0，宽度为100%。接下来，在JavaScript中，我们获取了header元素的高度和顶部位置，然后创建了一个scrollHandler函数，在该函数中，我们检查window.pageYOffset是否大于等于headerTop，如果是，则在header上添加“sticky”类，并在body元素上设置一个padding值。 否则，我们从header上删除“sticky”类，并在body元素上删除padding值。

最后，我们通过window事件监听器来触发scrollHandler函数。 所以，只要用户滚动页面，scrollHandler就会被触发，并相应地添加或删除“sticky”类。

我们可以将上面的代码分解成以下几个步骤：

• 获取header元素的高度和顶部位置；
• 创建scrollHandler函数，如果用户向下滚动页面，则在header上添加“sticky”类并在body元素上设置padding值；
• 如果用户向上滚动页面，则从header上删除“sticky”类并在body元素上删除padding值；
• 通过window事件监听器来触发scrollHandler函数。

当您需要在您的网页上添加粘性标题时，使用上面的代码就很容易了。