แสดงแถบนำทางแบบลอยเมื่อเลื่อน

สิ่งนี้ควรทำสิ่งที่คุณต้องการ (สมมติว่าคุณได้รวมไลบรารี jQuery แล้ว)

    <script type="text/javascript">
        $(document).scroll(function() {
            if ($(this).scrollTop() == 0) {
                $("#floating-nav-content").slideUp(400);
            } else {
                $("#floating-nav-content").slideDown(600);
            }

        });
    </script>

CSS ก็มีความสำคัญเช่นกัน เนื่องจากจะทำให้แถบนำทางอยู่ในตำแหน่งคงที่ที่ด้านบนของหน้า

    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
        }

        #floating-nav-content {
            top: 0;
            width: 100%;
            height: 20px;
            background-color: #000;
            position: fixed;
            display: none;
            color: #FFF;
            padding: 5px;
        }
    </style>

และแน่นอนว่าเป็น HTML ฉันวางด้านบนและด้านล่างทั้งหมดไว้ในแท็ก body

    <div id="floating-nav-content">
        Content
    </div>