js 浏览器滑动页面滚动条时，获取元素距离浏览器顶部距离，并且固定浮动导航...

 浏览器滑动页面滚动条时，获取元素距离浏览器顶部距离，动态获取。

举个栗子：

这是要循环的div,要菜单$(".mdtit") 在$(".box")距离顶部小于20px时保持浮动。

<div class="container">
<div class="box">
    <div class="mdtit">
        <div style="height:1.8rem;overflow:hidden; background: #fff;">
            <div class="maintit"><strong>学校介绍</strong></div>
            <div class="more">
                <a href="{:U('Article/index',['id'=>32])}">更多</a>
            </div>
        </div>
    </div>
<div class="mainlist">
    <ul>
        <volist name="listXsjs" id="l">
            <li>
                <!--<div class="listleft"><img src="{$l.litpic|getPhotoUrl}"> </div>-->
                <div class="listright nl">
                    <p><a href="{:U('Article/detail',['id'=>$l['id']])}">{$l.title}</a></p>
                </div>
            </li>
        </volist>
    </ul>
</div>
    </div>
</div>

 

.nav_index_fix {
    position: fixed;
    left: 0;
    top: 0;
}

 

    $(function(){
        $(window).scroll(function(){
            $(".box").each(function(){                //所有需要计算距离浏览器顶端高度的元素
                var scrollTop = $(window).scrollTop();// 网页被卷起来的高度
                var nap_top = $(this).offset().top;        //页面元素距离文档顶端高度距离
                if(nap_top-scrollTop < 20){              //元素距离浏览器顶部高度
                    $(".mdtit").removeClass("nav_index_fix");      
                    $(this).children(".mdtit").addClass("nav_index_fix");
                }else{
                    $(this).find(".mdtit").removeClass("nav_index_fix");
                }
            })
        });
    });

注意：声明的变量必须写在each循环里面，当滑动时才能动态获取当前元素距离顶部的距离

转载于:https://www.cnblogs.com/i6010/articles/6543067.html