修复滚动时的标题
当创建滚动时仍然可见的标题时，可以单独使用 CSS 和 HTML 来实现此行为，而不需要 jQuery。
CSS 和 HTML 解决方案
引入一个粘性标头类：
1 2 3 4 5 6 | <code class="css">.sticky-header {
width: 700px;
height: 50px;
background: orange;
position: fixed;
}</code>
|
登录后复制
在 HTML 中添加一个带有“粘性”类的 div：
1 | <code class="html"><div class="sticky"></div></code>
|
登录后复制
用于滚动事件的 JavaScript
为了精确控制标题的固定，滚动事件需要 JavaScript：
1 2 3 4 5 6 7 8 9 10 | <code class="javascript">$(window).scroll(function() {
var sticky = $('.sticky'),
scroll = $(window).scrollTop();
if (scroll >= 100) {
sticky.addClass('fixed');
} else {
sticky.removeClass('fixed');
}
});</code>
|
登录后复制
扩展示例
确定注视点根据粘性元素在屏幕上的位置，使用 offset().top:
1 2 3 4 5 6 7 8 9 10 11 | <code class="javascript">var stickyOffset = $('.sticky').offset().top;
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= stickyOffset) {
sticky.addClass('fixed');
} else {
sticky.removeClass('fixed');
}
});</code>
|
登录后复制
以上是如何在没有 jQuery 的情况下使用 CSS 和 JavaScript 创建粘性标题？的详细内容。更多信息请关注PHP中文网其他相关文章！
