页面滑动至某处，固定导航。

weixin_34010949

于 2017-04-18 18:12:00 发布

阅读量111

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xuemingyao/p/6729238.html

本文介绍了一种使用JavaScript和CSS实现网页中下载栏固定效果的方法。当页面滚动到一定位置时，下载栏会固定在顶部并保持可见。通过简单的代码示例展示了如何设置和触发这一效果。

<div class="download">我是要固定的</div>

.download.fixed {
    overflow: hidden;
    position: fixed;
    width: 100%;
    top: 0;
    background: #fff;
    z-index: 998;
}

        var downLoadBar = $('.download');
    var downSetTop = downLoadBar.offset().top;
    $(window).on('scroll', function() {
        var nowScroll = $(this).scrollTop()
        if(nowScroll > downSetTop) {
            downLoadBar.addClass('fixed')
        } else {
            downLoadBar.removeClass('fixed')
        }
    })