stick top

Previousjquery basic NextProgress-status bar

Last updated 4 years ago

Was this helpful?

stick top

Sticky to top

Stick-top by bs4 class stick-top

Stick-top by pure jquery

HTML

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>4_3_1_Scroll_to_fix_js_simple</title>
    <style>
        .fixed {
            position: fixed;
            top: 0;
        }
    </style>
</head>

<body>

    <div style="height:500px;background-color: dodgerblue;"></div>
    <div id="tofix1" style="height:100px;background-color: coral;z-index:99; width:100%"></div>
    <div style="height:500px;background-color: lightgrey;"></div>
    <div style="height:500px;background-color: white;">
        <svg id="tofix2" width="250" height="250" style="z-index:100;">
            <circle cx="100" cy="100" r="100" fill="coral" />
        </svg>
    </div>
    <div style="height:100vh;background-color: grey;"></div>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

</body></html>

JS

<script>
    var tofix1_pos = $("#tofix1").offset().top;
    var tofix2_pos = $("#tofix2").offset().top;
    $(window).scroll(function() {
        var current_pos = $(window).scrollTop();
        if (current_pos > tofix1_pos) {
            $("#tofix1").addClass("fixed");
        } else {
            $("#tofix1").removeClass("fixed");
        }
        if (current_pos > tofix2_pos) {
            $("#tofix2").addClass("fixed");
        } else {
            $("#tofix2").removeClass("fixed");
        }

    });
</script>

Hint: Stick-top modified

HTML & CSS

Question: 從上面的最簡範例改過來，我會把我的HTML Code會改成類似這個樣子。我要問的問題是，為何我要把#tofix1和#tofix2各自包在<div>中？ Answer: 原因是，如果我用jquery把<div> fixed下來，那她的空間就會被釋放出來，此時，底下所有的<div>都會往上跑，所以會有頁面的跳動。因此，我會把要被stick-top的<div>包在另外一個<div>中。這樣，我就可以用外部的<div>來保留要被fixed的物件的空間，而避免後面的<div>因為前面的<div>被fixed而空間釋放之故往前彈。

<body>

    <div style="height:500px;background-color: dodgerblue;"></div>
    <div style="height:100px">
        <div id="tofix1" style="height:100px;background-color: coral;z-index:99; width:100%"></div>
    </div>
    <div style="height:500px;background-color: lightgrey;"></div>
    <div style="height:500px;background-color: white;">
        <div class="row">
            <div class="col-6 offset-6">
                <svg id="tofix2" width="250" height="250" style="z-index:100;">
                    <circle cx="100" cy="100" r="100" fill="coral" />
                </svg>

            </div>
        </div>
    </div>
    <div class="container-fluid" style="height:100vh;background-color: grey;"></div>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

</body>