Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <header>
    <nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
            <a href="#" class="navbar-item">
                <img src="https://i.postimg.cc/7hXXKyz2/dark-bg-whatzeweb.png" alt="WhatZeWeb" id="nav-logo">
            </a>
        </div>
        <ul class="navbar-menu">
          <li><a class="navbar-item" href="#">Home</a></li>
          <li><a class="navbar-item" href="#">About</a></li>
          <li><a class="navbar-item" href="#">Contact</a></li>
        </ul>
    </nav>
</header>
<main role="main">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel posuere nibh. Aliquam gravida, erat vitae vulputate tincidunt, justo nulla iaculis dui, sed varius ligula erat a nisi. Nullam ut dui eleifend, suscipit massa non, dignissim turpis. Donec quis metus vitae quam tempor imperdiet. Suspendisse gravida augue venenatis, pellentesque enim sit amet, bibendum quam. Sed hendrerit velit sit amet consectetur dapibus. Nullam ligula lectus, facilisis eu est sed, molestie maximus eros. Morbi at posuere leo. Integer rutrum sem a turpis eleifend luctus. Duis sollicitudin mauris sit amet quam sodales, et sagittis lacus tincidunt.

        Phasellus et eros gravida, porttitor ex et, aliquet dui. Duis imperdiet fringilla lectus ac vulputate. Fusce ornare nec tellus sit amet convallis. Phasellus ultrices ex at luctus sodales. Mauris blandit dictum massa. Aliquam nec nunc nec est volutpat auctor. Suspendisse odio lorem, ullamcorper et risus non, mollis viverra sapien. Etiam faucibus varius porta. Nullam velit magna, tempor sed tristique at, varius in nunc. Nunc pulvinar egestas augue, vitae elementum tellus commodo ut. Phasellus nec sapien non nisl dignissim tempor.

        Etiam eget libero turpis. Suspendisse potenti. Donec accumsan libero quis finibus auctor. Morbi hendrerit lectus ante, tempus elementum sapien tincidunt eget. Nam venenatis ex eget risus tincidunt, quis sodales ligula laoreet. Sed dapibus ultricies nisi, ac iaculis diam aliquam quis. Nunc sed velit in purus eleifend maximus in in ligula. Morbi tortor velit, malesuada in facilisis eget, sollicitudin eget tellus. Praesent vitae consectetur odio, varius luctus metus. Aenean vitae finibus ipsum. Sed sed mauris massa. Mauris tempor purus sed leo sagittis sagittis. Fusce sed turpis sed tellus pretium dignissim. Aliquam erat volutpat.

        Sed a leo non dui auctor rhoncus. Proin ut tortor a quam placerat ultrices aliquet eu augue. Sed congue, arcu ut iaculis mattis, massa purus tristique velit, quis porta est elit eu nulla. Aenean id euismod purus, at consectetur erat. Suspendisse a leo nec lorem malesuada commodo. Duis gravida id massa sit amet euismod. Nunc iaculis dui augue, dignissim efficitur risus consectetur in. Proin posuere neque risus, vitae pretium sapien mollis at. Proin gravida quis erat ultricies mollis. Nullam tincidunt tristique facilisis. Duis ut turpis at leo pretium accumsan nec sit amet mauris.

        Vivamus egestas eget risus et pretium. In vel risus et nibh facilisis tristique. Sed eget euismod eros. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec placerat diam sit amet est laoreet tincidunt. Curabitur egestas, leo eu posuere tincidunt, leo eros aliquam ligula, nec faucibus leo felis ut tellus. Praesent sed ex ac ex tincidunt lacinia. Nunc pellentesque nisi vel lectus efficitur, in faucibus diam facilisis. Etiam ornare leo sed mi consequat, at mattis nunc varius. Etiam varius neque vitae neque consectetur tincidunt. Sed est leo, porta ut nulla sed, auctor blandit augue. Pellentesque tempor eu augue et venenatis. Cras sit amet ligula pellentesque, maximus elit eget, finibus odio. Maecenas viverra tortor velit, vitae blandit massa tincidunt vitae. Integer finibus scelerisque lacus, ut lacinia nisi volutpat tristique.

        Suspendisse pretium augue sapien, vel scelerisque urna consectetur sit amet. Sed sit amet odio dictum, efficitur erat ut, bibendum mauris. Fusce at tellus quis est placerat imperdiet a elementum quam. Sed quis pulvinar purus, id ullamcorper libero. Duis vel ultricies felis. Nunc eu pulvinar ipsum. Curabitur volutpat sem dolor, quis ornare purus aliquam non. Fusce aliquet semper tellus, et condimentum lacus luctus egestas. Suspendisse scelerisque viverra porttitor. Proin rhoncus odio sit amet tristique feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris nec quam arcu. Maecenas ut arcu luctus, hendrerit enim eu, ultricies mauris. Nulla tempor mi faucibus odio auctor, eget bibendum risus tristique. Pellentesque eleifend nulla et mattis placerat. Pellentesque quis convallis sem.

        Suspendisse nec tortor euismod velit varius lacinia et venenatis enim. Vivamus nec ipsum bibendum, consectetur ante quis, pharetra elit. Nunc vitae congue dui, et commodo tellus. Sed auctor justo sed laoreet convallis. Nulla facilisi. Nulla maximus est ligula, a elementum neque commodo non. Quisque ac justo arcu.

        Suspendisse a enim nibh. Pellentesque rutrum scelerisque ligula at facilisis. Ut ac mollis elit. Praesent congue, tortor vel vulputate sagittis, felis velit fermentum nunc, non fringilla lacus elit vitae leo. Nam cursus a libero eu pharetra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sollicitudin, neque sit amet maximus imperdiet, est ante fermentum turpis, vel ultricies nibh dui vel erat. Aliquam fringilla, ante at pretium venenatis, turpis odio porta ex, quis mattis velit sapien ornare neque.

        In euismod sollicitudin tortor, vitae accumsan dolor venenatis nec. Morbi dignissim risus tellus, non posuere nibh faucibus ac. Pellentesque justo lorem, suscipit a magna vitae, elementum efficitur purus. Nulla congue consequat augue, et placerat ex malesuada at. In in massa sem. Duis vitae feugiat neque, sit amet lobortis odio. Sed ut sem lobortis, fringilla sem a, porttitor dui. Nunc tempor, massa vel vestibulum pellentesque, odio urna dictum purus, vitae fermentum orci mauris quis odio. Mauris urna urna, vehicula a posuere sit amet, vehicula efficitur orci. Praesent in velit fringilla, finibus erat et, tempor eros. Praesent dictum facilisis nunc, a eleifend turpis interdum eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean nec tortor ultrices, porta lectus eu, consequat ipsum. Etiam a magna in risus iaculis ultricies eget tincidunt mi. Sed eu neque ex.

        Sed non dignissim arcu. Morbi ac ante euismod, cursus augue sodales, pharetra libero. Suspendisse at nunc eu urna mattis accumsan. Cras lacinia quam lorem, eget imperdiet nunc posuere at. Mauris semper nibh ac lacus imperdiet, non rutrum risus hendrerit. Phasellus magna dolor, tincidunt non molestie ac, facilisis vitae augue. Aliquam condimentum libero diam, sit amet varius sem vehicula et. In consectetur arcu lorem, in gravida lacus varius a. Nullam pretium ut sem in ullamcorper. Donec elit diam, posuere semper urna ut, gravida eleifend felis. Vivamus sit amet rutrum metus.
</main>
<footer>
  <a href="https://www.whatzeweb.com/blog/une-barre-de-navigation-fixe-avec-jquery" target="_blank">&copy; WhatZeWeb - Sticky navbar avec jQuery</a>
</footer>
              
            
!

CSS

              
                body {
  margin: 0;
}

nav {
  background-color: rgb(0, 153, 204);
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em;
}

.navbar-brand {
  display: flex;
}

#nav-logo {
  margin: auto;
}

.navbar-menu {
  list-style: none;
  display: flex;
}

.navbar-menu > li {
  margin-left: 2em;
}


.navbar-item {
  color: rgb(252, 252, 252);
  text-decoration: none;
}

nav.is-fixed-top.scrolled {
    background-color: rgba(252, 252, 252, .9);
    transition: background-color 200ms linear;
}

nav.is-fixed-top.scrolled .navbar-item {
  color: rgb(0, 153, 204);
}

main {
  padding-top: 250px;
}

footer {
  text-align: center;
}
              
            
!

JS

              
                $(document).scroll(function () {
  const navbar = $("nav.is-fixed-top");
  navbar.toggleClass('scrolled', $(this).scrollTop() > navbar.height());
  if (navbar.hasClass('scrolled')) {
    $("#nav-logo").attr('src', 'https://i.postimg.cc/kX4y7z8T/favicon-32.png');
  } else {
    $("#nav-logo").attr('src', 'https://i.postimg.cc/7hXXKyz2/dark-bg-whatzeweb.png');
  }
});
              
            
!
999px

Console