JSFiddle - React, Tailwind, and code Playground

by lindsay bradford

HTML

<div id="divNavBar" class="fixed-header" style="background-color: orange; top: 0px;">
    <ul style="list-style-type: circle;"><span style="cursor: pointer;">Menu - click me</span>
        <li>Home</li>
        <li>Mission</li>
        <li>Gallery</li>
        <li>Volunteering</li>
    </ul>
</div>

<div id="header" class="fixed-header" style="padding-left: 25px; background-color: lightblue; height: 100px;">
    <p>Header (graphs/images)</p>
</div>

<div id="content" style="padding-left: 25px; background-color: lightgreen; height: 650px;">
    <p style="font-weight: bold;">This content will scroll under the header and nav bar</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus condimentum mauris malesuada aliquet. Donec blandit tempus libero, non pretium dolor. Fusce condimentum eu magna mattis interdum. Etiam sodales vel mauris a dignissim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque eu sagittis sapien. Duis vitae mauris ipsum. Maecenas ultrices tempor elit in convallis.Donec nec libero ut augue tempor fermentum. Integer porta purus ut massa luctus aliquet. Sed dapibus velit eu porttitor eleifend.</p>
    
    <p>Vivamus mauris mauris, pharetra eget aliquam ut, rhoncus ac magna. Aenean rutrum commodo sollicitudin. Quisque tempor nulla orci, at vehicula magna mattis eget. Nunc gravida diam eu dui tempor, ut venenatis magna pharetra. Donec convallis nulla non nisi placerat suscipit. Morbi id interdum leo. Aenean consequat tincidunt mi id vehicula.</p>

    <p>Sed sodales mauris sit amet nisi pulvinar, vitae laoreet ipsum scelerisque. Sed varius nunc ac lacus vestibulum, vitae porttitor nisl mattis. Vestibulum efficitur justo et nunc porttitor, ac egestas dui scelerisque. In mattis maximus ultrices. Sed mattis augue ac eleifend ultricies. Phasellus et turpis sit amet nulla placerat iaculis. Praesent maximus vel quam quis consectetur. Cras vel rhoncus leo, eu aliquam massa.</p>

   ...

CSS

.fixed-header {
    width: 100%;
    margin: 0 auto;
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 999;
}

JavaScript

$(document).ready(function() {
    $("ul").click(function () {
        $("li", this).toggle();
        adjustPlacement();
    });
    
    $("li", this).toggle();
    adjustPlacement();
});

function getDivPlacement(divID) {
        return $('#' + divID).position().top + $('#' + divID).height();
}

function adjustPlacement() {
    //jQuery
    var headerPlacement = getDivPlacement('divNavBar');
    $("#header").css({ top: headerPlacement + 'px' });
    
    var contentPlacement = getDivPlacement('header');
    $('#content').css('margin-top',contentPlacement);
}