KirimaSharo's Blog
一只瑟瑟发抖的萌新......
KirimaSharo's Blog KirimaSharo's Blog

JQuery实现轻量级滑动悬浮固定功能

in 收藏/转载 read (447) 文章转载请注明来源!

浏览器向下滚动到一定位置继续滚动时,侧边导航固定在页面顶部,再滚动到一定位置时页面再向下滚动侧边导航不再固定。页面向上滚动到一定位置继续滚动时,侧边导航保持在原来位置。这种效果怎么实现呢

网上搜了一大片,看到这个教程不错,转下来,马克~ 其实想试一下这prism代码高亮怎么用。。。

HTML代码

    <div style="height: 200px; background: #999"></div>
  
    <!-- 固定元素悬浮后,原来所在的位置会被空缺(height变成0),
     导致页面闪跳且计算不准,所以必须设置一个确定高度的div框住 -->
    <div style="height:300px;">
        <div class="fixed" style="height: 300px; background: green; text-align: center;">滚动悬浮块</div>
    </div>
    
    <div style="height:400px;background: #999"></div>
    <div class="bottom" style="height: 500px; background: red; text-align: center;">结束滚动块</div>
    <div style="height:800px; background: #999"></div>

HTML代码中主要定义了两个DIV,它们 class 分别为 fixed 和 bottom。fixed是滚动的时候要悬浮固定块,滚动到 bottom 时停止浮动。

JS代码

    <script type="text/javascript">
    $(function() {
        var fix = $('.fixed');                      //滚动悬浮块
        var end = $('.bottom');                     //滚动到这个元素后结束固定
        var fixTop = fix.offset().top,              //滚动悬浮块与顶部的距离
            fixHeight = fix.height();               //滚动悬浮块高度
        var endTop, miss;                           //结束元素与顶部的距离
    
        $(window).scroll(function() {
            //页面与顶部高度
            var docTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
    
            //如果有结束块
            if (end.length > 0) {
                endTop = end.offset().top;
                miss = endTop - docTop - fixHeight;
            }
    
            if (fixTop < docTop) {
                fix.css({'position': 'fixed'});
                if ((end.length > 0) && (endTop < (docTop + fixHeight))) {
                    fix.css({top: miss});           //滚动悬浮块滑到结束块上时,top值为负,即慢慢隐藏出浏览器
                } else{
                    fix.css({top: 0});              //滚动悬浮块未到结束块上时,top为0
                }
            } else {
                fix.css({'position': 'static'});
            }
        })
    });
    </script>

如果不需要结束块,直接不设置bottom,或者删掉这个class就可以了。

如果需要更加复杂的样式,可以把:

    fix.css({'position': 'fixed'});
    fix.css({'position': 'static'});

分别换成:

    fix.addClass('scrollfix');
    fix.removeClass('scrollfix');

其中,scrollfix 样式需要在 CSS 中定义。

演示:https://codepen.io/applemiku/pen/PeQNjZ
转自https://www.awaimai.com/447.html

本文基于《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
文章链接:https://kirimasharo.com/archives/349.html (转载时请注明本文出处及文章链接)

js
发表新评论
仅有 1 条评论
  1. 变态鹅
    变态鹅 10Chrome
    回复

    惊了,怎么不水了

雷姆
拉姆