如何使用 jQuery 更改滚动元素的样式？

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

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

例子：

HTML

  

    
        How to change style of elements 
        on scroll using jQuery?
    
  
    
    
  
    
        .classinitial {
            height: 200px;
            background-color: rgba(255, 255, 255, 0.5);
            position: fixed;
            top: 200;
            width: 100%;
            transition: all 0.5s;
            background-clip: border-box;
            border-width: 5px;
            border-style: solid;
        }
  
        .classfinal {
            height: 100px;
            background-color: rgba(0, 0, 0, 0.8);
            position: fixed;
            top: 200;
            width: 100%;
            transition: all 0.5s;
            border-width: 8px;
            border-style: solid;
        }
  
        .wrapper {
            height: 2000px;
            padding-top: 200px;
            color: green;
            text-align: center;
            font-size: larger;
            font-weight: bold;
        }
    

  

    
    
        Geeks For Geeks
    
  
    
        $(function () {
            var header = $(".classinitial");
            $(window).scroll(function () {
                var scroll = $(window).scrollTop();
  
                if (scroll >= 155) {
                    header.removeClass('classinitial')
                            .addClass("classfinal");
                } else {
                    header.removeClass("classfinal")
                            .addClass('classinitial');
                }
            });
        });
    

  

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

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

输出：