Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
​
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
​
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link rel="stylesheet" href="css/styles2.css">
    <link href="https://fonts.googleapis.com/css?family=Architects+Daughter|Permanent+Marker|Raleway" rel="stylesheet">
</head>
​
<body data-spy="scroll" data-target="#navbarSupportedContent" data-offset="70">
    <nav id="mainNav" class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">Mile High</a>
​
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#header">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a href="#body1" class="nav-link">First Section</a>
                </li>
            </ul>
        </div>
    </nav>
    <section id="header">
        <div class="header-text-box text-center">
            <div class="header-text">
                <h1 class="display-3">Mile High Apps</h1>
                <p class="display-4">Some quirky and fun tagline.</p>
            </div>
            <a class="btn btn-primary btn-lg mt-1 mt-sm-3" href="#body1">Want to see more?</a>
        </div>
    </section>
    <section id="body1" class="my-4 mx-3">
        <h1 class="mb-3">This is the first body of text</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto deleniti vero numquam exercitationem facilis obcaecati, autem sed qui doloribus repellat cum, officiis quidem ipsa modi in! Veritatis tempora soluta voluptatibus delectus vitae illum architecto, dicta rem error aut, asperiores. Nihil rerum, repellendus similique quisquam porro, ullam eveniet quae soluta cum quis ipsa voluptates eaque facilis quas voluptatum vel, amet vero iusto. Iste, et animi laboriosam maiores, accusamus voluptate. Possimus beatae cupiditate soluta earum est ex, unde nemo officia veritatis quas sint eos impedit libero delectus odio iure odit quam tenetur, facere ratione magni minus omnis harum. Soluta eum exercitationem inventore vitae, assumenda, veritatis praesentium laudantium explicabo sapiente impedit, aliquam illum maiores reprehenderit. Reprehenderit est ex vitae error ad magni ducimus numquam laborum. Inventore, voluptas, modi. Doloremque quo libero illum, ratione voluptatibus aut aperiam minus impedit quod modi in, ea incidunt excepturi itaque dolore dignissimos eos vitae ad. Natus distinctio, amet, cupiditate tempore laborum consectetur, atque fuga laudantium nihil, inventore debitis quas unde optio commodi. A culpa cum voluptatibus neque, delectus distinctio voluptates amet, quod, rem facilis enim sint cumque voluptate, assumenda ducimus ratione dolorum iusto deleniti. Deserunt possimus repellat voluptates impedit, est sapiente. Quae in delectus doloremque tempora officia, nostrum tempore aliquam ad quia? Quibusdam vel ratione possimus sapiente consequatur, dolorum provident eaque, et praesentium ab facilis iure quam. Aliquid doloribus ipsam quia itaque suscipit, quo adipisci officia ad fugit voluptatem repellat explicabo aliquam labore a sapiente, consequuntur veritatis recusandae soluta nemo minima. Odit explicabo dolore quos harum, architecto consequatur molestiae neque nulla exercitationem, distinctio iusto natus minus alias officiis, voluptatum culpa dolores deleniti deserunt pariatur ea eligendi aperiam. Sapiente nobis voluptatem perspiciatis sit dolores cumque dolore. Error est dicta illum fugit maxime reiciendis officiis, alias laudantium sint labore! Beatae laboriosam, sapiente ut deserunt optio quia placeat nesciunt? Vero esse eius repudiandae ut. Itaque fuga officiis, inventore natus. Numquam alias, at quia itaque. Temporibus delectus at dolorum molestiae fuga, amet tempora exercitationem placeat facilis officiis cum commodi tenetur, adipisci nostrum? Perferendis quo, temporibus architecto eos velit, dolorum iure numquam natus saepe eaque provident ducimus error officia. Nihil deserunt quaerat excepturi inventore aut minima vel ex harum atque ea non, rem temporibus sapiente laboriosam eligendi sed iste, cumque quia voluptatum! </p>
        <p>Expedita maiores ea, minus cumque iste sed quae quibusdam, totam iusto inventore vel autem exercitationem facilis doloribus aperiam. Ratione vel in atque repudiandae error voluptate consectetur. Nam ipsa repellendus eaque suscipit illo modi nisi dolor fuga. Ipsam magnam enim voluptates quae unde velit necessitatibus magni voluptatibus veniam consequatur iste odit modi saepe, impedit, earum iusto, corrupti totam! Quidem explicabo totam aspernatur, aperiam accusantium, dolores obcaecati placeat omnis error doloremque ipsam. Ipsum officiis odio alias voluptates. Ratione ipsa reprehenderit magnam quaerat, in, eum ipsam fugiat saepe itaque eveniet molestias et, doloribus modi quo veniam animi quidem nihil. Vero veniam harum, eaque praesentium! Alias, nemo neque quae quam cupiditate corrupti itaque temporibus, qui officia laboriosam debitis repellat quidem deserunt animi aut libero eos, molestias rem omnis! Odit ex soluta necessitatibus blanditiis corrupti iusto amet temporibus commodi quae, suscipit nostrum ullam impedit culpa eaque earum. Molestias tenetur hic consequuntur enim rerum odio, dolorem facilis optio magnam repellendus architecto consectetur inventore cum. Soluta non reiciendis incidunt enim rerum perspiciatis modi vitae. Cumque veritatis omnis, quas minus sunt nihil incidunt, perferendis nulla, aspernatur cum laboriosam quos quaerat eius. Illo amet assumenda unde, dolor doloribus. Aperiam expedita ratione dignissimos eius officia harum porro tempore libero nobis laudantium, sint pariatur eligendi veritatis et nihil veniam! Vitae eaque, doloremque a molestiae commodi architecto velit esse cumque sit asperiores, suscipit quam tempore est pariatur sequi officia deleniti itaque magnam quaerat aspernatur voluptates expedita sapiente adipisci. Voluptatibus et neque ducimus est ad. Natus architecto deleniti expedita tempora eaque repellendus dolorem maiores, sint commodi aperiam ex ab accusamus enim modi voluptatum numquam! Facere laboriosam dolor, quaerat. Quasi totam eveniet sit tempore doloremque ratione sint ipsum provident odio quae. Dolorem repellat tempore itaque, esse quasi sint distinctio nulla amet. Fugit maiores inventore quo optio ea nesciunt voluptate saepe dolore ex molestiae, animi quibusdam sed dignissimos libero. Rerum ipsa officiis, eveniet consectetur consequuntur asperiores cum dicta veritatis eos molestias at velit. Quas praesentium, possimus qui dolorem totam asperiores excepturi incidunt. Modi provident alias ab laborum! Quos soluta ratione, ut molestias! Accusantium, laboriosam nulla rerum libero eveniet, rem. Eius adipisci quisquam veniam suscipit quo, similique soluta, quos officiis eos animi hic cumque dicta. Molestias asperiores consectetur a deleniti ut magnam repellat. Repellat nulla aperiam eius numquam, laudantium consectetur, possimus rem illum hic praesentium facere! Enim eos, accusamus labore totam iste nisi, perferendis delectus laboriosam dicta vitae voluptatum iusto modi placeat omnis sed vel architecto! Ipsa enim dicta fuga, nihil nemo totam similique animi cum, modi, earum blanditiis quo ad, incidunt asperiores sed aperiam illo deserunt quidem quod! Odio harum dolores nobis, officiis cumque fugit numquam sapiente molestias praesentium eaque optio incidunt? Dolores quod in libero eum cumque nobis molestias. Maiores rerum at molestias, sequi in facere, aspernatur dolorum rem deserunt dolor. Eligendi dolore quas non cumque. Vitae molestias voluptate laboriosam eveniet aperiam beatae deserunt repudiandae dolores blanditiis, itaque, officia pariatur expedita obcaecati unde a et dolorem sunt reiciendis vel, qui, error corporis ex. Laborum quibusdam, earum veritatis dignissimos doloribus soluta laboriosam nisi natus veniam reprehenderit! Suscipit cumque fuga amet odio vitae ducimus laboriosam accusantium expedita provident aliquam a voluptates perspiciatis, modi ea necessitatibus eaque itaque! Laudantium aliquam ab vel et beatae doloribus rem molestiae laborum unde provident, consequuntur eius in. Eligendi minima labore neque itaque, atque quam consequatur eaque? Voluptatem magni sint sunt maxime molestias, obcaecati iste in rerum, minus numquam eveniet reiciendis unde voluptate, aliquid quia illum aspernatur repellat non, dolores ad nobis. Quidem vitae veritatis qui, laborum cumque aliquam minima! Sed, doloremque. Eligendi numquam asperiores quibusdam quas eaque saepe rerum similique veniam facere, ipsum corporis tempora ipsa quos veritatis ratione voluptatem officiis quae deleniti aliquam expedita dolore ea quo voluptates fugit aperiam! Ab veniam perferendis sit dolores aliquid, beatae accusamus voluptatum quidem ipsam nihil vel rerum suscipit fugiat labore, rem consequatur, doloremque iusto!</p>
    </section>
    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <script src="js/milehigh.js"></script>
</body>
​
</html>
​
 
body,
html {
    height: 100%;
    font-family: 'Raleway', sans-serif;
}
​
body {
    position: relative;
    overflow-y: auto;
    background-color: antiquewhite;
}
​
.navbar {
    background: transparent;
    transition: 0.0s ease-in-out;
}
​
/* If removed, scrollspy works.  If !important is removed, scrollspy works,
   but the menu items are black and only the brand is white */
.navbar.notscrolled .navbar-brand,
.navbar.notscrolled a {
    color: white!important;
}
​
/*.navbar.notscrolled a {
    color: white!important;
}*/
​
.navbar.scrolled {
    background: rgba(255, 255, 255, 1); //IE
    background: rgba(0, 0, 0, 0.78); //NON-IE
}
​
.navbar.scrolled a {
    color: black;
}
​
.navbar.scrolled .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}
​
.navbar.scrolled button {
    border-color: rgba(0, 0, 0, .75);
    border-width: 2px;
}
​
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}
​
button.navbar-toggler.navbar-toggler-right {
    border-color: rgba(255, 255, 255, .0);
    border-width: 2px;
}
​
#header {
    background-color: lightblue;
    background-size: cover;
    width: 100%;
    height: 100vh;
    color: white;
    display: flex;
}
​
.header-text {
    font-family: 'Architects Daughter', cursive;
}
​
.header-text-box {
    margin-left: auto;
    margin-right: auto;
    margin-top: 35vh;
    height: 300px;
    width: 80%;
}
​
.header-text-box h1,
.header-text-box p {
    font-weight: 500
}
​
@media (max-width: 768px) {
    .header-text-box {
        margin-top: 30vh;
    }
}
​
@media (max-width: 545px) {
    #header h1 {
        font-size: 60px;
    }
    #header p {
        font-size: 30px;
    }
    #header .btn {
        font-size: 15px;
    }
}
​
@media (max-width: 338px) {
    #header h1 {
        font-size: 50px;
    }
    #header p {
        font-size: 25px;
    }
}
​
 
        // Closes the Responsive Menu on Menu Item Click
        $('.navbar .navbar-collapse ul li a').click(function () {
            $('.navbar-toggler:visible').click();
        });
​
        // Highlight the top nav as scrolling occurs
        $('body').scrollspy({
            target: '.fixed-top',
            offset: 51
        });
​
        function checkScroll() {
            var startY = $('.navbar').height() * 2; //The point where the navbar changes in px
​
            if ($(window).scrollTop() > startY) {
                $('.navbar').addClass("scrolled");
                $('.navbar').removeClass("notscrolled");
            } else {
                $('.navbar').addClass("notscrolled");
                $('.navbar').removeClass("scrolled");
            }
        }
​
        if ($('#mainNav').length > 0) {
            $(window).on("scroll load resize", function () {
                checkScroll();
            });
        }
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers