javascript - 如何在每次滚动时切换 <p> 高亮显示？

Question

我想做什么

像这样，我想突出显示<p>每次滚动时的元素。
也就是说，通常是 opacity: 0.3; ，当滚动时，它会切换到 opacity: 1;从上往下依次。

---

我尝试了什么

window.onscroll = function {scrHL};

function scrHL() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.querySelector('.main-p p').style.opacity = '1';
  } else {
    document.querySelector('.main-p p').style.opacity = '.3';
  }
}

没成功。不太明白..
如何切换 <p> 的突出显示每次我滚动？

---

当前状态

就像这样。 更改 to or from数字不突出显示..为什么..

---

代码

HTML

<div class="mai">
  <section class="main-p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></section>
</div>

CSS

.mai {
  margin: 2.8rem 0 0 0;
  height: 37.8rem;
  overflow-y: scroll;
  overflow-x: hidden;
  -ms-overflow-style:none;
}
.mai::-webkit-scrollbar {
  display:none;
}

.main-p {
  white-space: pre-wrap;
}

JS

window.onscroll = function {scrHL};

function scrHL() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.querySelector('.main-p p').style.opacity = '1';
  } else {
    document.querySelector('.main-p p').style.opacity = '.3';
  }
}

Answer 1

这是快速工作示例，请在全屏模式下尝试(当您运行 snippet 时，右侧会出现全屏链接)...我希望这将完全满足您的需求:)

//defining highlight boundaries
//don't know on what way you will use it but i suggest this to be related to some element "highlighter area" or something like that"
var highlight_from = 200;
var highlight_to  = 400;

$(document).ready(function(){

  $(document).scroll(function(){

    onScroll();

  });

  //running function on page load, because something must be highlighted at begin...
  onScroll();

});

function onScroll() {
  var scrollTop = $(window).scrollTop();

  $("p").each(function(i) {

    $("p").eq(i).removeClass("highlight");

    var pos = $("p").eq(i).position()['top'] - scrollTop;

    if ((pos > highlight_from) && (pos < highlight_to))
    {
      $("p").eq(i).addClass("highlight");
    }
  });
}

p {opacity: 0.3; }
.highlight { opacity: 1 !important; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget finibus mauris, malesuada maximus urna. Aliquam tristique augue hendrerit ultricies commodo. Sed accumsan sed felis nec euismod. Pellentesque ac odio augue. Vestibulum vitae sem ut diam semper tristique sit amet egestas eros. Vivamus eget consequat leo. Vestibulum ut justo at magna ornare egestas.</p>

<p>
Cras venenatis iaculis ex, in elementum neque suscipit quis. Morbi diam ipsum, cursus id dictum et, rhoncus non purus. Donec vitae dui eu neque faucibus varius. Aliquam eget ex vel dui condimentum rutrum sed id libero. Morbi dictum sapien felis, quis ornare tortor gravida sed. Vivamus vitae tellus vehicula, pellentesque nunc eu, ullamcorper turpis. Nunc faucibus rutrum enim ac viverra. Proin sit amet ornare nisl. Praesent commodo tincidunt mi et lobortis. Morbi accumsan aliquam mollis. Curabitur dictum condimentum risus et cursus. Vivamus at vehicula neque, quis feugiat ipsum. In porttitor congue lacus. Maecenas ornare eu tortor non consequat.</p>
<p>
Cras nec tristique lacus. Nulla a orci ut urna lobortis venenatis et eu dolor. Morbi vestibulum convallis vestibulum. Integer libero lacus, malesuada quis nunc et, varius facilisis dui. Pellentesque blandit turpis diam, ac consectetur mi placerat quis. In faucibus diam pharetra massa ullamcorper mollis. Integer suscipit volutpat ante, mollis ullamcorper dolor molestie vel.</p>
<p>
Maecenas in leo tortor. Curabitur interdum massa nec mauris tempus dapibus. Integer suscipit dui et sapien faucibus convallis. Vivamus nec quam lectus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut pretium, quam nec vehicula pretium, erat arcu laoreet nisi, eu commodo dui mauris in ante. Ut finibus commodo nisl, et euismod est gravida id. Aenean nunc lectus, euismod id pretium a, mattis vitae arcu. Curabitur sodales purus ex. Pellentesque interdum aliquet luctus. Etiam dictum eleifend arcu vitae bibendum. Donec varius dolor sed tellus pharetra auctor.</p>
<p>
Donec commodo ut nunc ut vulputate. Nullam tempus tellus eu pellentesque dictum. Cras nec efficitur dui, nec dapibus mi. Maecenas sagittis dui in mi imperdiet varius. Phasellus quam leo, lacinia vel tempus sit amet, suscipit eu odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In aliquam quam nec consectetur eleifend. Donec pulvinar dui ac nisi fermentum dapibus. Cras tincidunt, purus vel vestibulum dictum, mi erat vestibulum urna, vitae tincidunt nisl leo id lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer lobortis nisi id nulla convallis pulvinar. Donec placerat, tellus iaculis feugiat viverra, urna lorem posuere metus, convallis imperdiet purus mi vitae nulla. Ut gravida est ac risus efficitur, eu ornare erat cursus. Fusce elementum in leo eu hendrerit. Proin ultrices diam ullamcorper felis fermentum dignissim.</p>
<p>
Etiam non est malesuada, eleifend massa in, luctus lorem. Curabitur mattis auctor ultrices. Integer vitae imperdiet mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat dolor euismod, semper nibh sit amet, pellentesque magna. Fusce tellus mi, ultricies id lectus in, suscipit molestie ligula. Nunc accumsan ipsum erat, id vulputate justo lobortis id. Praesent tincidunt risus ac ipsum dapibus, vitae facilisis nibh fringilla.</p>
<p>
Donec ac porttitor nunc. Pellentesque scelerisque augue metus. Suspendisse pulvinar tincidunt turpis, a viverra augue hendrerit vel. Pellentesque vel pretium turpis. Duis id libero eleifend, semper ligula at, interdum nulla. Nullam fermentum augue vel dictum efficitur. Etiam et odio quam. Duis a augue id purus porttitor pretium et vitae nulla. Pellentesque vitae magna eleifend lectus euismod ornare ut sit amet orci. Nam hendrerit orci ac metus pretium blandit nec eget nunc. Nunc eget semper metus. Praesent congue mauris quis interdum interdum.</p>
<p>
Suspendisse suscipit est nunc, in semper erat viverra vel. Suspendisse dictum vitae lectus at aliquam. Proin dignissim, libero suscipit gravida mattis, lorem ligula dignissim nibh, sit amet gravida nisi leo at sapien. Nunc rutrum aliquam ligula, at dapibus ipsum sagittis eu. Nulla dictum diam leo, eget egestas nunc fringilla eget. Quisque vitae suscipit ante, eu sodales orci. Donec justo dui, condimentum quis consequat ac, efficitur quis ipsum. Ut eu eros eget velit commodo maximus. Curabitur purus ante, vehicula sit amet orci eu, sodales feugiat turpis. Suspendisse potenti. Vestibulum non risus nec tortor tempor ultrices. Cras convallis turpis non quam commodo, non accumsan mauris viverra. Sed scelerisque tellus at turpis interdum viverra. Nam commodo aliquet felis. Integer euismod, est a maximus aliquam, turpis quam dictum ex, ac faucibus nibh magna sed risus. Nullam consequat elit sem, egestas suscipit erat faucibus id.</p>
<p>
Fusce euismod, nisi viverra gravida dignissim, diam arcu venenatis ex, bibendum lobortis nisl tellus ac sapien. Pellentesque euismod vitae erat in venenatis. Nullam viverra augue orci, sed maximus mi consectetur a. In faucibus felis quis dolor bibendum efficitur. Morbi ac vehicula lectus. Fusce consequat nisl vel finibus condimentum. Vivamus tincidunt quis nisi non scelerisque. Sed dolor leo, tristique ut vestibulum feugiat, lacinia eu nibh. Suspendisse nec sagittis tellus. Mauris dolor ipsum, tincidunt at mi a, porta tincidunt odio. Suspendisse a justo ut justo fermentum maximus. Nullam venenatis facilisis ligula, vel tempus erat. Nulla id libero purus. Duis fringilla neque quis velit interdum molestie id eget velit. Nullam et facilisis sem, nec rhoncus metus. Aenean elementum eros vitae nulla ultricies ultricies.</p>
<p>
Donec posuere sit amet sem ultrices pulvinar. Sed bibendum elit eu hendrerit cursus. Donec suscipit, augue quis luctus blandit, justo augue consectetur tellus, sit amet molestie massa felis vitae velit. Fusce varius pretium magna a iaculis. Nunc pellentesque eget mauris sit amet egestas. Vestibulum lectus odio, volutpat non commodo ut, convallis non nisi. Nullam tincidunt a magna vel vehicula. Duis molestie varius ornare.</p>
<p>
Donec a viverra lectus, ac efficitur justo. Nunc egestas urna eu arcu bibendum, nec aliquet arcu bibendum. Suspendisse vel gravida metus. Aenean molestie nunc et dui varius feugiat. Sed et elementum libero. Sed dapibus lorem ex, malesuada vulputate risus maximus pellentesque. Morbi quis egestas ex, ut porttitor turpis. Nunc ac condimentum tellus. In blandit in ex nec consequat. Donec ut felis interdum, pretium lorem sit amet, volutpat quam. In augue odio, vulputate vitae tempus et, aliquet nec tortor. Mauris euismod nibh quis turpis tincidunt rhoncus. Maecenas diam arcu, dignissim ac pellentesque vitae, pretium ut erat. Proin porta dui tincidunt nulla feugiat dignissim. Phasellus laoreet hendrerit finibus. Donec cursus tempus mattis.</p>
<p>
Proin euismod, arcu et hendrerit auctor, augue nisl facilisis quam, et scelerisque magna mi sed nisi. Nam bibendum facilisis dapibus. Aliquam in blandit neque. Nam ligula eros, imperdiet ac est et, cursus aliquet risus. Ut in lacus ultricies orci volutpat bibendum a id elit. Suspendisse eget rutrum tellus, id auctor augue. Morbi quam nisi, iaculis commodo commodo a, pharetra ac mauris.</p>
<p>
In mattis neque gravida, tristique leo ac, mattis lectus. Maecenas mattis orci ac hendrerit maximus. Nunc laoreet rhoncus turpis quis viverra. Pellentesque quam elit, maximus ut tortor non, finibus euismod elit. Aliquam dignissim maximus hendrerit. Donec in leo non turpis finibus blandit ac at dolor. Sed ac fermentum ligula, id ullamcorper enim. Etiam convallis vestibulum ex a ultrices.</p>
<p>
Phasellus accumsan justo id molestie convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent rutrum laoreet nunc at aliquam. Aliquam erat volutpat. In a neque orci. Suspendisse quis nibh nibh. Quisque in neque lacinia elit tincidunt dignissim.</p>
<p>
Pellentesque eu lectus nunc. Maecenas id libero aliquam, sodales elit ut, blandit risus. Proin vel tellus quis neque bibendum hendrerit vel sed lacus. Nam condimentum non arcu ac consectetur. Quisque quam augue, lacinia vitae sem non, tincidunt tincidunt ante. Mauris dapibus tristique augue, ac varius mauris cursus at. Donec quis ultrices risus. Vestibulum quis ligula odio. Suspendisse potenti. Donec at dapibus lacus. Nam interdum pellentesque risus eu interdum. Nullam ut finibus est, vitae efficitur nisi. Duis vitae lectus quam. Maecenas eget diam varius, tristique leo ac, mattis ex. Praesent rhoncus augue in enim posuere, at ultricies tellus rhoncus.</p>
<p>
Aliquam ac dignissim est. Sed dictum nunc vitae luctus tincidunt. Nulla nibh justo, varius ut volutpat sed, placerat vitae lacus. Praesent dapibus commodo eros, sed pharetra dui mollis eu. Aliquam malesuada mi dui. Praesent facilisis felis in massa condimentum, in vestibulum neque efficitur. Aliquam et sagittis sapien. Morbi tincidunt, arcu in tincidunt iaculis, erat nibh malesuada mi, at posuere nisi elit sed tortor. In elementum consectetur ex ut varius. Nulla tempus dui eros, et vulputate massa accumsan sit amet. Integer ut ante a ligula pulvinar feugiat eu in dolor. Nam sodales non ipsum in feugiat.</p>
<p>
Quisque sodales faucibus nibh, eu tincidunt tortor sodales sit amet. Curabitur in efficitur risus. Cras eu lorem mi. Etiam lacinia ornare auctor. Fusce fermentum libero rutrum, lobortis lorem at, venenatis arcu. Mauris elementum odio sem, nec tempus elit iaculis id. In convallis massa laoreet sagittis placerat.</p>
<p>
Fusce eu bibendum velit. Praesent at sem imperdiet, condimentum diam imperdiet, tempor enim. Nam vitae mattis massa. Donec malesuada quis magna in finibus. Aenean ac ultrices mauris, non semper purus. Suspendisse potenti. Sed viverra in metus a faucibus. Etiam at nibh quis felis blandit eleifend. Donec sed nisi tortor. Nulla facilisi. Nam eget malesuada nisi.</p>
<p>
Sed nec mattis quam. Nunc luctus magna et justo viverra dignissim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque convallis, ipsum vel laoreet mattis, tortor arcu pharetra elit, a vehicula nunc felis ac purus. Nulla quis libero tincidunt, rhoncus mi in, sollicitudin diam. Pellentesque id venenatis diam. Quisque mattis arcu a pellentesque hendrerit. Vestibulum rhoncus imperdiet placerat. Sed tempor, nibh vel volutpat pellentesque, tellus leo pharetra justo, nec bibendum dui elit faucibus augue.</p>
<p>
Sed mattis a purus sit amet rhoncus. Integer tempus felis sed nibh vulputate commodo. In cursus lobortis tempor. Proin hendrerit quam sit amet ex elementum, ut maximus sem luctus. Nam volutpat euismod neque, sed tempus quam euismod ut. Vivamus elementum elementum magna ut fringilla. Aliquam vestibulum, nisl id hendrerit auctor, risus sem viverra ex, blandit vehicula est turpis at mi. Sed a ligula eros.</p>
<p>
Ut tristique massa sed dolor facilisis interdum. Praesent consectetur tortor et ex hendrerit imperdiet. Sed dolor lectus, finibus in arcu et, pellentesque imperdiet sem. Aenean vestibulum turpis id fringilla blandit. Pellentesque vitae urna dapibus, pellentesque quam sit amet, consectetur magna. Maecenas auctor rutrum suscipit. Proin congue dapibus laoreet. Vivamus volutpat est in pharetra suscipit.</p>
<p>
Maecenas sed ipsum ac lacus porta finibus auctor a arcu. Suspendisse convallis massa ut orci commodo, et vulputate mauris cursus. In iaculis convallis lorem, eu gravida urna laoreet suscipit. Aenean eleifend posuere dui, ut molestie enim blandit et. Pellentesque enim sapien, gravida quis tristique non, placerat quis urna. Aliquam in nunc malesuada, aliquam quam vitae, iaculis libero. Pellentesque maximus felis ac auctor faucibus. Quisque consequat eu eros nec egestas. Donec maximus maximus enim, vitae volutpat odio porta malesuada. Donec non porttitor odio. Nunc ut ipsum ut lacus condimentum mattis. Vestibulum id aliquam sapien, at efficitur mauris.</p>
<p>
Cras at blandit sem. Nunc non ante eu enim ultricies pellentesque et quis lorem. Sed dignissim eleifend odio, iaculis malesuada nisi egestas ullamcorper. Vivamus sem velit, rutrum ut erat vitae, auctor lobortis odio. In leo felis, tincidunt eget euismod vitae, ultrices in arcu. Mauris auctor felis nisi, eget facilisis enim bibendum ut. Nam sed maximus felis. Phasellus pellentesque faucibus lectus, id tincidunt enim consectetur tristique. Aenean varius, tortor auctor feugiat porta, lacus ligula tempus ante, vitae elementum lectus urna quis est. Nam mollis leo sit amet lacus scelerisque consequat. Pellentesque condimentum nisi tortor, vel facilisis tellus congue posuere. Nam nec felis vulputate, vestibulum risus sed, imperdiet nunc. Sed diam felis, laoreet eget sodales et, vehicula sed mi. Duis vitae lorem nibh. Curabitur vitae pretium est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
<p>
Quisque et porta dolor. Aliquam arcu est, faucibus sit amet volutpat a, dictum ac urna. Sed a turpis sed tellus vulputate viverra. Proin quis efficitur metus. Nullam dolor neque, pretium non diam non, venenatis laoreet diam. Curabitur fermentum consequat dignissim. Morbi dictum in massa eget dapibus. Vivamus molestie metus ut arcu interdum bibendum. Quisque in est odio. Integer cursus tellus vel feugiat accumsan. Integer a tellus blandit, aliquam enim nec, aliquet dui. Curabitur et scelerisque mauris, quis auctor nisi.</p>
<p>
Suspendisse potenti. Mauris ultrices erat et risus mollis venenatis. Proin vitae neque non velit lobortis maximus id id eros. Ut laoreet lacus eu neque consequat placerat. Ut ipsum ligula, rutrum vitae quam nec, varius placerat libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit convallis ipsum, a euismod erat consequat placerat. Aenean laoreet nunc nec ante blandit tincidunt. Cras quis nulla mollis mauris semper commodo.</p>
<p>
Sed aliquam vulputate urna, in venenatis lorem consectetur quis. Duis convallis felis purus, eget interdum mi fringilla non. Fusce eleifend vitae mi eget malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In varius justo dolor, vitae rutrum nibh euismod a. Aenean id hendrerit lorem, iaculis vehicula nisi. Donec vitae laoreet dui. Praesent eget magna odio. Ut aliquam efficitur cursus.</p>
<p>
Suspendisse potenti. Proin ut nisl elementum, convallis augue in, rutrum ligula. Quisque mattis rutrum ex et sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed pellentesque ultricies interdum. Praesent mattis luctus leo, sit amet placerat nisl suscipit vestibulum. Maecenas ornare nulla eu eros efficitur semper. Sed vel erat nec sapien hendrerit viverra quis quis mauris. Pellentesque arcu nisi, ultrices eu nisl non, ultricies sollicitudin enim.</p>
<p>
Nullam id enim eu tortor maximus faucibus vitae sed risus. Fusce et blandit quam. Vivamus maximus ornare enim, in consectetur justo. Proin ultrices non tortor et euismod. Donec id accumsan magna. Morbi sagittis diam et erat tempus, non pulvinar leo luctus. Vivamus risus nibh, dignissim eget venenatis molestie, pellentesque non nisl. Nunc mollis enim consectetur, maximus nulla nec, pharetra est. Sed pharetra convallis ex ac sollicitudin. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent eget viverra felis, a tristique nisl. Pellentesque eget suscipit velit. Duis in mattis ex, vel viverra nulla. Donec a elit ut neque convallis finibus.</p>
<p>
Donec ac est vitae arcu consequat lacinia id id turpis. Aenean ac malesuada massa. Sed diam odio, blandit sed efficitur quis, viverra tincidunt tellus. Aliquam tempus quis risus vel ullamcorper. Donec fermentum elit vel nunc eleifend vehicula. Quisque a tempus lectus. Aliquam erat volutpat. Cras id posuere erat. Mauris in laoreet leo. Quisque quis mauris eros. Sed imperdiet est vel semper aliquam. Pellentesque ac eros sed libero tincidunt congue ornare vel sapien. Sed ipsum odio, rhoncus vel elit pulvinar, egestas tincidunt velit. Nam pharetra aliquam pellentesque.</p>
<p>
Proin sed augue et nisi aliquam auctor mollis vel mauris. Maecenas sit amet cursus erat. Quisque pellentesque vulputate lectus. Cras maximus nibh non faucibus egestas. Vivamus tristique dolor enim, ac elementum orci vestibulum condimentum. Donec non urna sit amet dolor efficitur vulputate in sed diam. Nam non ultrices tortor. Donec ac fermentum nisi. Sed in odio tristique, porta tortor at, faucibus sapien. Duis ac dui metus.</p>