JSFiddle - React, Tailwind, and code Playground

by Upward

HTML

<script src="https://raw.github.com/gist/4066951/05f738a230993e8543c9e307d93f826bdaa18009/getBordersInViewport.js"></script>
asdasdasdadasd<br>
asdasdasd
<div class="b-menu">Menu :in-viewport</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum ante sed enim dignissim quis tempor augue lacinia. Quisque commodo, nunc ut ullamcorper tristique, nulla metus cursus justo, ac tristique nisl neque eget nunc. Nam vitae purus dolor. Nulla ac nulla in risus volutpat vestibulum. Ut blandit vulputate lacus vel cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi porttitor sem commodo nibh tincidunt in commodo velit vestibulum. Aliquam erat volutpat. Etiam id fermentum erat. Nulla eleifend erat vitae tellus iaculis pulvinar. Donec leo enim, ultrices quis dignissim ac, tempor faucibus nibh. Sed ultricies, tellus ut sodales fringilla, lectus purus suscipit sem, sit amet vestibulum massa lacus sollicitudin nisl. Pellentesque ipsum orci, facilisis sed pulvinar ut, pulvinar vitae enim. Vestibulum quis dui dui. 

 Cras non ante risus. Nulla facilisi. Nullam in justo metus. Fusce imperdiet odio ac lectus adipiscing aliquam. Donec venenatis varius massa at faucibus. Fusce vitae lacus eros, sed cursus mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam id metus a diam volutpat molestie. Sed mattis, mauris ut varius bibendum, tortor nulla consectetur nisl, in hendrerit nisl augue id ipsum. Phasellus egestas dolor vel eros placerat at imperdiet est lobortis. Praesent varius aliquet arcu, nec adipiscing diam fermentum eget. Proin interdum varius aliquet. 

 Curabitur ante dolor, eleifend in fermentum eu, faucibus nec arcu. Fusce ullamcorper pellentesque mauris vel sagittis. Pellentesque id mattis diam. Sed consequat laoreet odio. Ut lobortis, risus id porttitor ullamcorper, sem metus molestie ligula, in porta ante quam eget tellus. Class aptent taciti sociosqu ad...

CSS

body {
    height: 2000px;
}

p {
    padding-top: 55px;
}

.b-menu {
    background: #eee;
    height: 50px;
    border-bottom: 1px solid #999;
    position: absolute;
    width: 100%;
}

/* This is how position: sticky; works*/
.b-menu_position_sticky {
    position: fixed;
}

/* :in-viewport is flexible */
/*.b-menu:not(:in-viewport)*/
.b-menu_not-in-viewport {
    top: 0;
    position: fixed;
    color: red;    
    box-shadow: 0px 0px 20px #777;
}

JavaScript

// Polyfill of .b-menu:not(:in-viewport) {
//    position: fixed;
//    color: red;    
//    box-shadow: 0px 0px 20px #777;
// }

var menu = document.querySelector('.b-menu');

function notInViewportPylyfill(element, cssClass) {
    element.classList.remove(cssClass);
    
    // getBordersInViewport() see https://gist.github.com/4066951
    var bordersInViewport = getBordersInViewport(element);
    
    if (!bordersInViewport.all) {
        element.classList.add(cssClass);
    }
}

window.addEventListener('scroll', function () {
    notInViewportPylyfill(menu, 'b-menu_not-in-viewport');
}, false);