jQuery 頁面滾動 吸頂 和 吸底

芳香四溢713051發表於2021-01-28
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>

效果預覽：

相關文章