时间戳

首页 > 解决方案 > 如何在滚动时突出显示/更改颜色为 div

javascript - 如何在滚动时突出显示/更改颜色为 div

问题描述

我的 html 中有 4 个月的里程碑。当滚动屏幕到达 div 时，我想突出显示相应的月份。

你能帮我用javascript或查询我应该怎么做吗？

.highlight{
 color:blue;
}

HTML

<body> 
<div id="Jan" style="margin-bottom:50em;">  
   <p> January updates</p>
   blah blah blah 
</div>

<div id="Feb" style="margin-bottom:50em;"> 
   <p> February updates</p>
    blah blah blah 
</div>

<div id="Mar" style="margin-bottom:100em;"> 
   <p> March updates</p>
   blah blah blah 
</div>

<div id="Apr" > 
  <p> April updates</p>
  blah blah blah 
</div>
</body>

这是我试图在滚动时突出显示 div 的 javascript。

<script>
var myDiv = document.getElementById("myBtn");

$(document).on('scroll', function() {
if($(this).scrollTop()>=$('#theTarget').position().top){
   if((myDiv)== "Jan" | "Feb" | "Mar" | "Apr" )
   {
         myDiv.setAttribute("class","highlight");
   }
  }
})
</script>

标签： javascripthtmlcss

解决方案

您可以查看以下链接

css-tricks.com

在这个例子的帮助下，当 div 进入计算机的可见区域时，您可以应用 CSS 来突出显示 div

推荐阅读