javascript - On-Scroll animate script. It runs only once -
i want script run whenever user scrolls second div. second div in sense "content" div. first div header. on-scroll animate script.
<!doctype html> <head> <script type="text/javascript"> $(document).ready(function(){ $('.content').scroll(function(){ if ($(this).scrolltop() > 100) { $(".header").animate({"height": "300px"},"slow"); } else { $(".header").animate({"height": "100px"},"fast"); } }); }); </script> <style> body{ margin:auto; overflow:hidden; background-color:#000; } .outer{ width:800px; border:thin solid; height:900px; background-color:#fff; margin:auto; } .wrapper{ width:800px; position:relative; z-index:100; height:900px; } .header{ width:800px; height:300px; border: thin solid #f00; background-color:#666; } .content{ width:800px; height:600px; overflow:scroll; } </style> </head> <body> <div class="outer"> <div class="wrapper"> <div class="header"></div> <div class="content"> <p>dummy content content makes div scroll.</p> </div> </div> </div> </body> </html> script must run whenever user scroll div.
this working on google chrome : http://jsfiddle.net/3kysd/2/ don't know why on firefox (v22.0) working extremely slow. have changed little thing in code leads think wasn't working in opinion... had test :
if ($(this).scrolltop() > 100) i replaced one, header bar biggest when content div @ top, , smaller when reading content div:
if ($(this).scrolltop() < 100) 
Comments
Post a Comment