📌  相关文章
📜  如何使用 jQuery 更改滚动元素的样式?

📅  最后修改于: 2021-11-24 04:45:31             🧑  作者: Mango

我们给出了一个包含一些 CSS 属性的 HTML 文档,任务是在使用 jQuery 滚动页面后将 CSS 属性更改为特定元素。要更改滚动元素的样式,我们需要获取元素内容水平或垂直滚动的像素数。

以下示例说明了如何在元素滚动时更改元素的样式。在元素滚动时更改元素样式的一种方法是更改元素所属的类。

例子:

HTML


  

    
        How to change style of elements 
        on scroll using jQuery?
    
  
    
  
    

  

    
    
        Geeks For Geeks     
          


上面的代码在CSS样式属性的帮助下为初始类和最终类(根据代码称为classinitial和classfinal)添加了样式。下面是有助于更改 html 代码中存在的标题元素的类的 JavaScript 代码。

如果页面垂直滚动 155 像素,jQuery 代码会将标题元素的类从 classinitial 翻转为 classfinal。否则它将类从 classfinal 翻转到 classinitial。为此,在上面的代码中使用了 jQuery 方法 addClass() 和 removeClass()。这里的 scrollTop()函数用于获取元素滚动的像素数,并将其保存在名为 scroll 的变量中。

输出: