Skip to content

Instantly share code, notes, and snippets.

@morgyface

morgyface/change.js

Created April 13, 2025 20:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save morgyface/009845c771ecfb9efd4895209719ef29 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save morgyface/009845c771ecfb9efd4895209719ef29 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. morgyface created this gist Apr 13, 2025.
    14 changes: 14 additions & 0 deletions change.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    $(function() {
    var header = $(".header");

    $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    var position = header.offset().top;

    if (scroll >= position) {
    header.removeClass('sticky').addClass("static");
    } else {
    header.removeClass("static").addClass('sticky');
    }
    });
    });
    7 changes: 7 additions & 0 deletions markup.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    <body>
    <div class="content"></div>
    <div class="header sticky">
    <div class="nav">links</div>
    </div>
    <div class="content"></div>
    </body>
    19 changes: 19 additions & 0 deletions styling.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    .content {
    height: 120vh;
    background: blue;
    }
    .header {
    background: green;
    height: 2em;
    }
    .nav {
    color: white;
    }
    .sticky .nav {
    position: fixed;
    top: 1em;
    left: 1em;
    }
    .static .nav {
    position: static;
    }