jQuery 页面滚动 吸顶 和 吸底 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <div class="" style="width: 600px;margin: auto">
            <div class="top">
                我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容 我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容 我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容
            </div>
            <div class="title" style="width: 100%; height: 60px;background: #ccc; text-align: center; line-height: 60px;">
                吸顶部分
            </div>
            <div>
                我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容 我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容 我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容
                我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容 我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容 我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容
                我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容 我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容
            </div>
            <div class="zhanwei"></div>
            <div class="bottom" style="background-color: green;height: 60px;text-align: center;line-height: 60px;">
                吸底部分
            </div>
            <div>
                我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容 我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容 我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容
            </div>
        </div>
        <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {
                var titleTop = $('.title').offset().top;
                let viewH = $(window).height(); 
                let zhanweis = $(".zhanwei").offset().top;
                
                $(document).on('scroll', function() {
                    //滚动吸顶
                    var doc = $(document).scrollTop();
                    if(doc > titleTop) {
                        $('.title').css({
                            "position": "fixed",
                            "top": 0,
                            "width":"inherit"
                        })
                    } else {
                        $('.title').css("position","inherit")
                    }

                    //滚动吸底
                    if(doc+viewH >= zhanweis) {
                        $(".bottom").css("position","inherit")
                    } else {
                        $(".bottom").css({
                            "position": "fixed",
                            "bottom": 0,
                            "width":"inherit"
                        })
                    }
                })
            })
        </script>
    </body>

</html>

效果预览：

posted @ 2021-01-28 23:24  芳香四溢713051  阅读(426)  评论(0)    收藏  举报