在滚动条上突出显示文本

Posted 2023-05-09

【中文标题】在滚动条上突出显示文本

【英文标题】：Highlight text on scroll

【发布时间】：2018-05-06 06:42:36

【问题描述】：

我想让动画突出显示文本的每个字母。是否有 jQuery 插件可以突出显示窗口 scoll 上的文本？试图找出实现这一目标的轻量级方法。

【问题讨论】：

你的意思不是很清楚。突出显示滚动上的所有文本？或者一次只有一排还是什么？

我投票结束这个问题，因为在 SO 上要求第三个资源是题外话

我的意思是通过将短语包装在 span 中来突出显示页面上的短语。

添加onscroll，检测距离，做一些计算找出什么字母，添加一些CSS

【参考方案1】：

这就是我想做的：

highlight();

$(window).on("scroll", function()
  highlight();
);

function highlight()
  var scroll = $(window).scrollTop();
  var height = $(window).height();

  $(".highlight").each(function()
    var pos = $(this).offset().top;
    if (scroll+height >= pos) 
      $(this).addClass("active");
     
  );
  

https://jsfiddle.net/4vm1sht5/3/