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

网上搜了一大片，看到这个教程不错，转下来，马克~ 其实想试一下这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