为了账号安全,请及时绑定邮箱和手机立即绑定

如何在用户向下滚动时在 div 上设置类

如何在用户向下滚动时在 div 上设置类

一只萌萌小番薯 2022-08-27 13:52:56
我需要做一件事。我需要创建一个网站并控制用户的滚动,并相应地向页面上的元素添加类,例如这里..www.blogger.com。当用户向下滚动时,类“active”将添加到各节中。有谁知道任何指示或任何事情?非常感谢,我对JavaScript还不是很友好。
查看完整描述

3 回答

?
交互式爱情

TA贡献1712条经验 获得超3个赞

不知何故,我管理了这样的东西,但我不知道它写得有多好,因为我对JavaScript了解不多。


var sections = [

      "#mainPageSection-1",

      "#mainPageSection-2",

      "#mainPageSection-3"

    ],

    sectionHeights = [

      $("#mainPageSection-1").outerHeight(),

      $("#mainPageSection-2").outerHeight(),

      $("#mainPageSection-3").outerHeight()

    ],

    scrollBreakpoint = 0,

    i = 0;

    $(window).scroll(function() {

      totalView = $(window).height() + $(this).scrollTop();

      if((totalView > scrollBreakpoint) && (i < 3)){

        document.querySelector(sections[i]).classList.add("scrolled");

        scrollBreakpoint += (sectionHeights[i] + $(window).height()/5.5);

        i++;

      }

    });

.mainPageSection{

  height: 800px;

  color:white;

}


#mainPageSection-1{

  background-color: grey;

}


#mainPageSection-2{

  background-color: blue;

}


#mainPageSection-3{

  background-color: red;

}


.scrolled{

  color: black;

  transition: all .5s ease-in-out;

}

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

<section class="mainPageSection" id="mainPageSection-1">

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vestibulum efficitur pharetra. Duis eget dictum nunc. Donec gravida, nisl ut ultrices malesuada, turpis felis dictum tortor, eu eleifend ante turpis nec metus. Nunc imperdiet ligula eget orci feugiat ultricies. Cras ac ex iaculis, maximus lorem non, luctus nibh. Sed viverra egestas sem, non varius quam maximus non. Fusce nulla quam, tincidunt vitae vulputate mollis, semper eu risus. Praesent vel nisl eu enim ullamcorper congue eget vitae felis. Suspendisse aliquam neque sit amet molestie efficitur. Maecenas ut consectetur purus. Duis eget imperdiet nisl. Praesent ut elit ut tortor laoreet ultricies. Nulla ac orci quam. Curabitur mattis lorem ex, eget laoreet lectus rutrum id. Nulla tincidunt enim vitae lobortis interdum. Donec urna nisi, molestie eu molestie eget, molestie quis diam.</p>

</section>

<section class="mainPageSection" id="mainPageSection-2">

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vestibulum efficitur pharetra. Duis eget dictum nunc. Donec gravida, nisl ut ultrices malesuada, turpis felis dictum tortor, eu eleifend ante turpis nec metus. Nunc imperdiet ligula eget orci feugiat ultricies. Cras ac ex iaculis, maximus lorem non, luctus nibh. Sed viverra egestas sem, non varius quam maximus non. Fusce nulla quam, tincidunt vitae vulputate mollis, semper eu risus. Praesent vel nisl eu enim ullamcorper congue eget vitae felis. Suspendisse aliquam neque sit amet molestie efficitur. Maecenas ut consectetur purus. Duis eget imperdiet nisl. Praesent ut elit ut tortor laoreet ultricies. Nulla ac orci quam. Curabitur mattis lorem ex, eget laoreet lectus rutrum id. Nulla tincidunt enim vitae lobortis interdum. Donec urna nisi, molestie eu molestie eget, molestie quis diam.</p>

</section>

<section class="mainPageSection" id="mainPageSection-3">

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vestibulum efficitur pharetra. Duis eget dictum nunc. Donec gravida, nisl ut ultrices malesuada, turpis felis dictum tortor, eu eleifend ante turpis nec metus. Nunc imperdiet ligula eget orci feugiat ultricies. Cras ac ex iaculis, maximus lorem non, luctus nibh. Sed viverra egestas sem, non varius quam maximus non. Fusce nulla quam, tincidunt vitae vulputate mollis, semper eu risus. Praesent vel nisl eu enim ullamcorper congue eget vitae felis. Suspendisse aliquam neque sit amet molestie efficitur. Maecenas ut consectetur purus. Duis eget imperdiet nisl. Praesent ut elit ut tortor laoreet ultricies. Nulla ac orci quam. Curabitur mattis lorem ex, eget laoreet lectus rutrum id. Nulla tincidunt enim vitae lobortis interdum. Donec urna nisi, molestie eu molestie eget, molestie quis diam.</p>

</section>


查看完整回答
反对 回复 2022-08-27
?
千巷猫影

TA贡献1829条经验 获得超7个赞

您可以使用“滚动”事件,这是来自w3schools的示例


const scrollableEl = document.getElementById("scrollable-item")

let x = 0;


scrollableEl.addEventListener('scroll', function(e) {

  document.getElementById("demo").innerHTML = x += 1;

});

div {

  border: 1px solid black;

  width: 200px;

  height: 100px;

  overflow: scroll;

}

<p>Try the scrollbar in div.</p>


<div id="scrollable-item">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.

<br><br>

'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'</div>


<p>Scrolled <span id="demo">0</span> times.</p>


查看完整回答
反对 回复 2022-08-27
?
Smart猫小萌

TA贡献1911条经验 获得超7个赞

你可以在 css 类中滚动。如果你想在javascript中处理滚动,那么你可以检查overflowwindow.scroll

检查此链接 : https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll


查看完整回答
反对 回复 2022-08-27
  • 3 回答
  • 0 关注
  • 101 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号