首页 新闻 会员 周边 捐助

jquery 效果

0
[待解决问题] 浏览: 344次

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>
复制代码
Mi文的主页 Mi文 | 初学一级 | 园豆:6
提问于:2016-03-02 16:58
< > 字节跳动旗下AI助手豆包
分享
所有回答(1)
0

css3 > translate属性  或者  jq > .animate()做个动画

野兽' | 园豆:227 (菜鸟二级) | 2016-03-08 09:36
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册
Top