javascript - jquery小效果!!!
大家讲道理
大家讲道理 2017-04-10 17:15:42
0
1
438

重新提交是问题,之前的描述没有配图不好理解,像虎扑这样的
拉动屏幕向上滚,当周四碰到上面那导航栏(nba 中国篮球)
的时候就浮在它下面,然后拉到周五的话周五就浮到导航栏下面,以次拉周六,周日也是一样
我解决了向上滚的效果,现在是向下滚,怎么让脱离文档流的这些title回到原来位置
要怎么计算????

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>z
            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>
            <p class="header"></p>
        </header>
        <p class="box">
            <p class="content"><p class="out_box"><p style="background:#8d8d8d" class="title">星期一</p></p><p class="message">内容</p></p>
            <p class="content"><p class="out_box"><p style="background:#646464" class="title">星期二</p></p><p class="message">内容</p></p>
            <p class="content"><p class="out_box"><p style="background:#8d8d8d" class="title">星期三</p></p><p class="message">内容</p></p>
            <p class="content"><p class="out_box"><p style="background:#646464" class="title">星期四</p></p><p class="message">内容</p></p>
            <p class="content"><p class="out_box"><p style="background:#886686" class="title">星期五</p></p><p class="message">内容</p></p>
            <p class="content"><p class="out_box"><p style="background:#8d8d8d" class="title">星期六</p></p><p class="message">内容</p></p>
            <p class="content"><p class="out_box"><p style="background:#646464" class="title">星期日</p></p><p class="message">内容</p></p>
        </p>
        <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>
大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

reply all(1)
左手右手慢动作
        $(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');
                    }
                })    
            })
            
        });
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template