javascript - How to find scrollTop after DOM modification -
i working on mobile application, use ajax load pages based on framework7, since i'm loading pages & content dynamically, function supposed change header's color not working anymore.
here fonction :
function scroller(){ var target=$(window).scrolltop(); console.log(target); if(target>=150){ $('.navbar').css({'background-color':'rgba(191, 141, 87, 1)', 'box-shadow':'0px 0px 5px black', 'transition': 'all 1s ease'}); } else{ $('.navbar').css({'background-color':'rgba(191, 141, 87, 0)','box-shadow':'none'}); } }
the console displaying 0 var target, , guess because modify dom , add content not here @ instanciation of page.
how can make function work ? thanks
edit :
i call function in body :
<body onscroll="scroller();">
see below example hope want this...
function scroller(){ var target=$(window).scrolltop(); console.log(target); if(target>=150){ $('.navbar').css({'background-color':'rgba(191, 141, 87, 1)', 'box-shadow':'0px 0px 5px black', 'transition': 'all 1s ease'}); } else{ $('.navbar').css({'background-color':'gold','box-shadow':'none'}); } } $(document).scroll(function(){ scroller(); })
.navbar{ position:fixed;top:0;background-color: gold;width:100%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navbar"> <p> header... </p> </div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
wiki
Comments
Post a Comment