jquery 效果
0
[待解决问题]
http://jsbin.com/luvitapede/edit?html,css,output
我还差一个功能：比如现在是星期一浮到header下，
我想当星期二上来的时候把星期一推走，有一个平滑推走的效果，以次类推
就像虎扑APP那种效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body,html{margin:0;padding:0;width:640px;margin:0 auto;} .box{width:640px;margin:0 auto;overflow:hidden;} .content .title{max-width:640px;height:50px;overflow:hidden;text-align:center;line-height:50px;} .content .message{width:100%;height:300px;line-height:200px;text-align:center;} header{width:640px;height:100px;margin:0 auto;overflow:hidden;} .header{position:fixed;width:640px;height:100px;background:#954351;} .out_content{height:50px;width:100%;overflow:hidden;} .navFix { position: fixed;z-index: 5555;width:640px;overflow:hidden;left:50%;margin-left:-320px;} .message{border:1px solid #333;box-sizing: border-box;} </style> </head> <body> <header> <div class="header"></div> </header> <div class="box"> <div class="content"><div class="out_box"><div style="background:#8d8d8d" class="title">星期一</div></div><div class="message">内容</div></div> <div class="content"><div class="out_box"><div style="background:#646464" class="title">星期二</div></div><div class="message">内容</div></div> <div class="content"><div class="out_box"><div style="background:#8d8d8d" class="title">星期三</div></div><div class="message">内容</div></div> <div class="content"><div class="out_box"><div style="background:#646464" class="title">星期四</div></div><div class="message">内容</div></div> <div class="content"><div class="out_box"><div style="background:#886686" class="title">星期五</div></div><div class="message">内容</div></div> <div class="content"><div class="out_box"><div style="background:#8d8d8d" class="title">星期六</div></div><div class="message">内容</div></div> <div class="content"><div class="out_box"><div style="background:#646464" class="title">星期日</div></div><div class="message">内容</div></div> </div> <script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script> <script> $(function() { var _scrollobj = $('.out_box'); var _navbanner = $('.header'); $(window).scroll(function(){ var _windowscrollTop = $(this).scrollTop(); _scrollobj.each(function(){ var _this = $(this); var _objscrollTop = _this.offset().top; var _bannerH = (_navbanner.length > 0) ? _navbanner.height() : 0; if(_windowscrollTop > (_objscrollTop - _bannerH)){ _this.children().addClass('navFix').css('top',_bannerH); }else{ _this.children().removeClass('navFix'); } }) }) }); </script> </body> </html>
所有回答(1)
0
css3 > translate属性 或者 jq > .animate()做个动画
