javascript - Add Class to <body> tag after user has scrolled on a web page -
i have webpage , when user has scrolled @ point, want div tag change class "the top" "the topscrolled".
i think have use .scrolltop() not quite sure how use it. here html code
<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> i include class named 'scrolled' in body tag after user has scrolled apply separate css styling.
yes, can use scrolltop function.
you can use on body :
$('body').scrolltop(); it return number of pixels scrolled.
let's want add class after 500 pixels scrolled :
$('body').scroll(function(){ // function called @ each scroll event if($('body').scrolltop()>=500){ $('.thetop').removeclass('thetop').addclass('thetopscrolled'); $('body').unbind(); // don't want add class @ each scroll event, once. } });
Comments
Post a Comment