javascript - 用户在网页上滚动后将类添加到标记

Question

我有一个网页，当用户在任何时候滚动时，我想要一个 div 标签将其类从“顶部”更改为“顶部滚动”。

我认为您必须使用 .scrollTop() 来执行此操作，但不太确定如何使用它。这是html代码

<div class="thetop">
        <?php /** Begin Header **/ if ($gantry->countModules('header')) : ?>
        <div id="rt-header">
           <div class="rt-container">
             <?php echo $gantry->displayModules('header','standard','standard'); ?>
             <div class="clear"></div>
           </div>
         </div>
         <?php /** End Header **/ endif; ?>
     </div>

在用户滚动以应用单独的 css 样式后，我还想在 body 标记中包含名为“scrolled”的类。

Answer 1

是的，您可以使用ScrollTop功能。

你可以像这样在身体上使用它：

$('body').scrollTop();

它将返回滚动的像素数。

假设您想在滚动 500 像素后添加一个类：

$('body').scroll(function(){
    // This function will be called at each scroll event
    if($('body').scrollTop()>=500){
        $('.thetop').removeClass('thetop').addClass('thetopscrolled');
        $('body').unbind(); // You don't want to add the class at each scroll event, just once.
    }
});