jQuery标题自动顶贴效果代码实例
分类:实例代码
拖动滚动条可以查看效果,比较常见于移动端。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> *{ padding:0; margin:0; } .title{ height:40px; background-color:#cfc; } .titleBar{ background-color:#ffc; height:30px; width:90%; text-align:center; line-height:30px; border-bottom:solid 1px #ccc; position:relative; } .titleBar.fixed{ position:fixed; top:0; } .content{ height:600px; background-color:#ccf; } .info{ position:fixed; top:0; width:100px; height:100px; background-color:#ccc; z-index:10; } </style> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script> $(function(){ var titlePosition = []; $('.title').each(function(i,e){ titlePosition.push($(e).offset().top); }) $(window).on('scroll',function(){ $('.info').text($(this).scrollTop()); for(var i in titlePosition){ if($(this).scrollTop() >= titlePosition<i>){ $('.title').eq(i).find('.titleBar').addClass('fixed'); }else{ $('.title').eq(i).find('.titleBar').removeClass('fixed'); } } }) }) </script> </head> <body> <div class="pad"> <div class="title"> <div class="titleBar">1</div> </div> <div class="content"></div> </div> <div class="pad"> <div class="title"> <div class="titleBar">2</div> </div> <div class="content"></div> </div> <div class="pad"> <div class="title"> <div class="titleBar">3</div> </div> <div class="content"></div> </div> <div class="info"></div> </body> </html></i>
jQuery标题自动顶贴效果代码实例,这样的场景在实际项目中还是用的比较多的,关于jQuery标题自动顶贴效果代码实例就介绍到这了。
jQuery标题自动顶贴效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。