如何在滚动条上修复标题

如何在滚动条上修复标题,第1张

如何在滚动条上修复标题

您需要一些JS来进行滚动事件。最好的方法是为固定位置设置一个新的CSS类,当滚动超过某个点时,该类将分配给相关的div。

HTML

<div ></div>

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');});

编辑:扩展示例

如果触发点未知,但只要粘性元素到达屏幕顶部,触发点就应该

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');});


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5440553.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-12-11
下一篇 2022-12-11

发表评论

登录后才能评论

评论列表(0条)

保存