关于多个垂直排列的div滚动 固定到顶部的问题

qianduanxb 发布于 2017/03/08 08:45
阅读 103
收藏 1

这里有一个列表  我想要每一个 表头 到顶部时  都固定到顶部  下面是  代码 复制 可直接 看效果 div 向上走添加class样式可以固定到顶部   但是 再往回滚动就去除不了classs样式了 。

<html>
    <head>
        <meta charset="UTF-8"/>
        
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        
        <title></title>
    </head>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        .phet{
            height: 44px;
            text-align: center;
            line-height: 44px;
        }
        .div{
            height: 44px;
            border: 1px solid red;
            text-align: center;
            line-height: 44px;
            background: #EFEFF4;
            width: 99%;
            margin: 0 auto;
        }
        .gao{
            position: fixed;
            z-index: 99;
            top: 0;
        }
        .topzhi{
            width: 99%;
            margin: 0 auto;
        }
    </style>
    <body>
        <div class="madin">
            <div class="div">
                <p>这是第一个div</p>
            </div>
            <div class="topzhi"></div>
            <p class="phet topzhi">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <div class="div">
                <p>这是第二个div</p>
            </div>
            <div class="topzhi"></div>
            <p class="phet topzhi">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <div class="div">
                这是第三个div
            </div>
            <div class="topzhi"></div>
            <p class="phet ">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
            <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        </div>
    </body>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
            /*    
                      当前页面的高度
                 var winTop = $(window).height();
                     滚动条距离顶部的高度
               var winScrolled = $(window).scrollTop();
                       ding距离顶部的高度
               var selectorTop = $(".ding").offset().top;
               
               winScrolled+winTop>selectorTop
            滚动条距离顶部的高度
             */
            $(document).ready(function(){
                    //获取定位元素距离浏览器顶部的距离
                    //var top = $(".ding").offset().top;
                $(window).scroll(function(){
                    //获取滚动条的滑动距离
                    var scroH = $(this).scrollTop();
                    
                            // 分别获取ding的top
                        $(".div").each(function(index) {//遍历所有的ding
                            //获取div距离顶部页面的距离
                            $(this).data('top', $(this).offset().top) 
                        
                        // scroll里面, 需要分别判断top
                          
                            if ($(this).data('top') - scroH < 42 ) {
                                if (!$(this).hasClass('gao')) {
                                    $(this).addClass('gao').css("z-index","99");
                                    $(this).next('.topzhi').css({'height':'44px','border':'1px solid blue'})
                                }
                              
                            } else if($(this).data('top') - scroH >  42 ) {
                                
                                 $(this).removeClass('gao').css("z-index","0");
                            }
                        })
                    });
                });
                
    
            
                
        </script>
</html>

以下是问题补充:

@qianduanxb:哪位大神费点心 帮忙解决一下啊。 (2017/03/08 09:48)
加载中
0
l
loveb

offset().top 定位于文档 位置不变的,你滚动后 添加为fixed定位,所以导致div文档的高度就会随着滚动的改变而改变,然后 滚动赋值,导致offset为动态,无法比较。建议先取值存数组比较

返回顶部
顶部