ChlodAlejandro/Dynamic Sidebar.html

## Dynamic Sidebar.html
<!DOCTYPE html>
<html>
    <head>
        <title>Dynamic Sidebar Test</title>
        <meta charset="utf-8">
        <script>
        var sidebarBounds;

        function startup() {
            window.scrollTo(0, 0);
            sidebarBounds = document.getElementById("sidebar").getBoundingClientRect();
        }
        function eligibleForTracking(el) {
            var docEl = document.documentElement;
            var windowtop = (window.pageYOffset || docEl.scrollTop) - (docEl.clientTop || 0);
            if (sidebarBounds.top < windowtop) {
                return false;
            } else {
                return true;
            }
        }
        function sidebarLocationCheck() {
            var sidebar = document.getElementById("sidebar");
            if (eligibleForTracking(sidebar)) {
                sidebar.style = "border-radius: 3vh;border: 5px #007CC2 solid;width: 25vw;padding: 2.5vw;";
            } else {
                sidebar.style = "border-radius: 3vh;border: 5px #007CC2 solid;width: 25vw;padding: 2.5vw;position: fixed;top:0px;left:" + sidebarBounds.left + "px";
            }
        }
        </script>
        <style>
            body {
                color: white;
                background-color: #303030;
            }
            td {
                vertical-align: top;
            }
            #content {
                width: 60vw;
                padding: 2.5vw;
            }
            #sidebar {
                border-radius: 3vh;
                border: 5px #007CC2 solid;
                width: 25vw;
                padding: 2.5vw;
            }
        </style>
    </head>

    <body onscroll="sidebarLocationCheck()" onload="startup()">
        <table><tr>
                <td colspan=100>
                    <div id="header">
                        <p>Header information goes here. It can be your organization logo, or maybe a welcome banner for visitors. Either way, this will be the storage are of the header, and the script will adapt to the sizes, automatically. The width of the content and sidebar, however, are not adaptable, which menas you will have to manually tweak the settings of the sidebar and content widths, which are both modifiable in the inline css style above.</p>
                    </div>
                </td>
            </tr><tr>
            <td>
                <div id="content">
                    <p>Your massive pile of content comes in here. Since we do not have enough content to fill this area, we will just paste in automatically generated text.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et gravida ante, at ullamcorper tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis non nibh in magna scelerisque malesuada sed sit amet enim. Praesent posuere leo id luctus accumsan. Suspendisse placerat molestie feugiat. Aliquam aliquam felis at ipsum scelerisque euismod. Nullam eu nibh est. Integer ultrices magna vel ante blandit commodo. Duis vitae magna ac purus elementum mattis id vel ligula. Nunc ut libero sit amet felis rutrum sagittis. Vivamus vel metus id neque tristique scelerisque et vel felis.
                    </p><p>
                    Ut a dui tincidunt massa malesuada dignissim. Ut commodo, nibh eget porta convallis, eros leo sollicitudin turpis, quis porttitor nisi urna ut leo. Aliquam vel tempor magna, eget dictum metus. Integer tincidunt luctus orci nec dictum. Praesent vel maximus leo. Quisque interdum rhoncus nibh in laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent non massa quis leo interdum pharetra eget non elit. Integer felis magna, porta a elit ut, bibendum hendrerit lorem. Curabitur aliquam sagittis iaculis. Aliquam erat erat, lacinia sit amet mattis ac, luctus ut diam. Proin consequat ultrices imperdiet. Cras semper et quam in hendrerit. Aliquam ultricies lorem bibendum justo tristique viverra. Phasellus tristique velit ut sapien suscipit posuere.
                    </p><p>
                    Aenean dignissim nisi vel nulla elementum tincidunt. Nulla egestas, ligula vel facilisis eleifend, libero arcu accumsan arcu, et vehicula ex orci vel sem. Cras luctus libero eu auctor imperdiet. Vestibulum at libero dictum, placerat dolor vitae, pellentesque est. Praesent vel placerat elit. Nullam blandit quam metus, ac tempus diam finibus quis. Cras vehicula, erat eget viverra laoreet, dolor nibh porttitor est, quis pulvinar mauris tellus in neque. Sed quam turpis, facilisis ut eleifend in, hendrerit nec leo. Cras sit amet libero quam.
                    </p><p>
                    Maecenas vitae vulputate lacus, eget viverra urna. Morbi vestibulum eu orci eget posuere. Nunc iaculis lacus sed ligula pellentesque, vitae tempor est lobortis. Vivamus sed lobortis erat. Aliquam vel massa sollicitudin, fringilla sapien eu, faucibus eros. In in ligula ac eros pulvinar sodales blandit sed enim. Aliquam euismod pellentesque elit ut aliquet. Pellentesque venenatis libero ornare semper tempor. Proin interdum fringilla nibh quis semper. Sed porttitor pretium magna. Phasellus ut consequat justo. Donec semper sollicitudin neque, tincidunt aliquam augue egestas sed. Duis in pretium enim, sed varius lacus.
                    </p><p>
                    Quisque suscipit eget ex nec porta. Nullam vulputate volutpat ornare. Proin feugiat dolor sed justo vulputate gravida. Fusce ac nisi nisi. Etiam scelerisque ut arcu nec convallis. Nullam congue nulla sem. Proin laoreet lacus mauris, vel maximus ligula faucibus sit amet.
                    </p><p>
                    Nunc pretium leo congue turpis dictum, in auctor ligula ultrices. Proin ac pellentesque sem, eu sollicitudin tellus. Pellentesque quis tortor consectetur, pulvinar lacus eget, condimentum lectus. Sed pretium eleifend libero, ac sagittis purus accumsan nec. Etiam mi massa, vulputate in dolor tincidunt, consequat placerat massa. Ut pretium nibh nec viverra posuere. Aliquam vel nibh ac sem venenatis vestibulum ac sed diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse quis posuere arcu. Fusce sit amet nisi est.
                    </p><p>
                    Integer lacinia nunc tellus, vel lobortis arcu tincidunt sit amet. Nam pulvinar non eros vel laoreet. Integer risus magna, viverra a dui in, posuere malesuada tellus. Praesent ornare nec lorem gravida tincidunt. Sed feugiat, augue sit amet dapibus sagittis, nisl leo bibendum quam, feugiat pretium turpis tellus et lectus. Nunc auctor tempus ipsum, euismod auctor magna. Aenean sit amet magna non orci consectetur sollicitudin in eget tellus. Nullam mattis mauris condimentum nisl bibendum, convallis tempus arcu vehicula. Quisque malesuada gravida eros, et sagittis turpis semper et. Fusce sagittis leo vel quam bibendum imperdiet a id lorem.
                    </p><p>
                    Integer sed elementum lorem. Vivamus dui nunc, tincidunt quis pretium a, feugiat at dui. Sed pellentesque arcu vel porttitor dapibus. Nulla non tincidunt augue. Suspendisse sed sem cursus, facilisis felis ut, ornare ex. Proin in sem at sapien bibendum pretium. Suspendisse elit ligula, pulvinar ac sollicitudin non, convallis non tortor. Sed eu rhoncus felis. Nam efficitur diam purus, in pretium urna blandit dignissim.
                    </p><p>
                    Vivamus vitae velit ante. Morbi vel malesuada massa, semper egestas metus. Donec vehicula purus ut lacus eleifend rhoncus. Aliquam erat volutpat. Cras sem arcu, venenatis ac efficitur sed, suscipit at metus. Sed consequat non tortor a finibus. Aenean viverra magna erat, ut varius lacus vestibulum eget. Donec tristique vitae nulla ut posuere. Aenean eget aliquet ligula. Nunc pellentesque nibh ullamcorper gravida luctus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec ut leo porttitor, molestie velit vitae, sodales augue. Cras id dignissim nisi.
                    </p><p>
                    Vivamus id semper libero. Sed ac libero convallis, feugiat felis vel, finibus massa. Praesent at nisl vel ex laoreet lobortis. Etiam convallis eget justo ut sagittis. Cras efficitur orci non ipsum convallis, in rutrum tortor placerat. Donec faucibus lectus dui, vel interdum ipsum mattis nec. Curabitur porttitor sollicitudin quam vel congue. Donec turpis nibh, rutrum ut ornare nec, aliquam eget neque. Mauris et lorem vitae augue bibendum posuere a a mauris. Pellentesque facilisis pharetra dolor, nec euismod tellus convallis eu.
                </p>
                </div>
            </td>
            <td>
                <div id="sidebar">
                    <p>Here goes your sidebar. It will automatically stick to the top of the window by itself.</p>
                </div>
            </td>
        </tr></table>
    </body>
</html>