Pillow Themes Sticky Header Tutorial

<!DOCTYPE html>
<html>
<head>

<!---
  ___ ___ _    _    _____      __  _____ _  _ ___ __  __ ___ ___
 | _ \_ _| |  | |  / _ \ \    / / |_   _| || | __|  \/  | __/ __|
 |  _/| || |__| |_| (_) \ \/\/ /    | | | __ | _|| |\/| | _|\__ \
 |_| |___|____|____\___/ \_/\_/     |_| |_||_|___|_|  |_|___|___/

                             BY CARA

S T U D Y  S O U R C E
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sticky_header


-->

<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link href="https://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<link href="https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap" rel="stylesheet">

</head>

<style type="text/css">

body {
font-family: 'Karla', sans-serif;
background-color:#fcfcfc;
font-size:14px;
color:#000;
line-height:auto;
overflow-x:hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

a {
text-decoration:none;
}

header {
width:100%;
height:120px;
height:auto;
}

#blogtdesc {
width:100%;
height:100px;
background-image: linear-gradient(to right, #fff1eb 0%, #ace0f9 100%);
align-items:center;
}

#blogt {
font-size:20px;
font-weight:bold;
text-align:center;
padding-top:15px;
margin-bottom:10px;
}

#desc {
text-align:center;
}

navigation {
width:100%;
height:20px;
background-color:#fff;
border-bottom:1px solid #eeeeee;
}

#links {
width:100%;
height:auto;
text-align:center;
background-color:#fff;
padding:20px;
border-bottom:1px solid #eeeeee;
}

#links a {
margin-right:20px;
color:#000;
}

#links a:last-child {
margin-right:0;
}

.sticky-header {
position:fixed;
top:0;
width:100%;
height:0px;
background-color:#fff;
}

#content {
width:700px;
height:auto;
margin:80px auto;
background-color:#fff;
border:1px solid #eeeeee;
padding:30px;
}

#title {
font-weight:bold;
font-size:16px;
margin-bottom:20px;
}

/* TUMBLR CONTROLS */
.tmblr-iframe {
display:none;
}

</style>
<body>

<title>{Title}</title>

<header>
    <div id="blogtdesc">
        <div id="blogt">Pillow Themes' Sticky Header Tutorial</div>
        <div id="desc">Here's a little tutorial how to make a sticky header!<br>If you have any questions, feel free to message me.</div>
    </div>

    <navigation>
        <div id="links">
            <a href="/">Home</a>
            <a href="https://pillowthemes.tumblr.com/ask">Mailbox</a>
            <a href="https://pillowthemes.tumblr.com/portfolio">Explore Other Themes and Codes</a>
            <a href="https://sarcoline.tumblr.com/">Main Blog</a>
        </div>
    </navigation>
</header>

<div id="content">
<div id="title">Scroll down!</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tortor nisl, volutpat vel felis imperdiet, egestas commodo leo. Vestibulum consectetur augue vitae est elementum, a luctus eros iaculis. Aliquam iaculis turpis eget iaculis porta. Cras erat ante, eleifend vel purus vitae, aliquet aliquet diam. Aliquam vel euismod augue, interdum tempor augue. Mauris sodales velit ipsum, maximus posuere purus ornare quis. Cras vel venenatis lectus, sed molestie nunc. Sed in sollicitudin erat, eu interdum risus. In tristique ex pellentesque convallis euismod. Nam rutrum libero ut erat pellentesque, a sodales dui commodo. Phasellus rutrum magna ac orci faucibus consequat. Suspendisse bibendum, lacus eu interdum sagittis, turpis eros bibendum ligula, quis efficitur nibh erat non ipsum. Donec vestibulum justo enim, sodales ultrices justo dignissim ac. Vestibulum accumsan aliquam gravida.
<p>
Nullam molestie ornare odio ut ornare. Curabitur a vestibulum felis. Aliquam erat massa, rutrum venenatis consequat at, vehicula id orci. Donec non nisi metus. Quisque bibendum, nisi eu bibendum fermentum, lectus massa laoreet libero, vitae imperdiet massa nulla et lectus. Sed ultrices finibus metus. Nulla in lacus a odio pharetra varius at in erat. Donec dolor ipsum, tempor id erat nec, dignissim rutrum velit. Nullam massa ante, porttitor et augue in, pretium vestibulum nisl. Nulla tincidunt tellus a est dictum commodo. Vivamus sit amet auctor enim. Pellentesque sagittis mauris a orci egestas, malesuada gravida leo scelerisque. Ut tristique dolor dolor, sed consequat erat laoreet a. Sed pharetra a urna vitae lobortis.
<p>
Duis a molestie mauris. Aenean ut dolor lacus. Ut placerat quis libero in pharetra. Donec urna purus, tincidunt eget enim ac, rhoncus vestibulum lectus. Suspendisse rhoncus gravida felis, in aliquet purus iaculis non. Donec luctus vitae urna vitae molestie. In vel eros et nunc egestas eleifend. Vestibulum iaculis non lectus imperdiet dignissim. Proin rhoncus eget augue sit amet maximus. In hac habitasse platea dictumst. Vestibulum et maximus dui, quis ullamcorper ex. Morbi nec dui eu orci facilisis vestibulum rhoncus ut lorem. Cras fringilla orci nec erat dignissim, et laoreet odio interdum. Vestibulum vel suscipit diam, sit amet malesuada metus. Vestibulum feugiat lacus libero, eu blandit magna aliquam vel.
<p>
Phasellus ac elementum tellus. Morbi efficitur purus non quam luctus, ac iaculis ligula feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus. In enim dui, gravida nec consectetur id, pretium ullamcorper elit. Vivamus malesuada eros velit, non convallis lacus molestie eu. Etiam elit lorem, imperdiet vitae enim ut, pharetra varius turpis. Nulla ac leo est. Fusce pharetra dui tellus, dapibus auctor mi tempus vitae. Pellentesque eu rhoncus neque.
<p>
Praesent tincidunt lorem sed magna hendrerit scelerisque. Aenean pellentesque rhoncus lacus, non dignissim leo tincidunt ullamcorper. Etiam ornare ante venenatis, lacinia elit a, mattis mi. In fermentum tempor mauris, pellentesque consectetur libero suscipit sit amet. Integer sodales rhoncus sem, vel vulputate mi tempus eu. In maximus pharetra erat, id rutrum ipsum. Nulla facilisi. Vivamus hendrerit suscipit turpis, eu vestibulum nulla elementum ut. Suspendisse in dignissim dolor. Mauris gravida, purus ut hendrerit auctor, urna metus gravida turpis, a consequat libero diam et lectus. Quisque a porttitor turpis.
<p>
Ut ut feugiat diam, sodales pellentesque leo. Proin ex quam, finibus in facilisis vitae, consequat ut nisl. Aliquam vestibulum scelerisque tortor, ut porta augue convallis sit amet. Vestibulum consectetur eu neque eget tristique. Nunc id erat nisi. Morbi rutrum vulputate massa vel mollis. Donec sed justo tempor, porta purus a, venenatis ante.
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla euismod eu neque vel tincidunt. Vivamus sit amet euismod nisl, eget viverra nunc. Nam pulvinar lacus vel nulla blandit commodo. Aenean placerat tincidunt nunc, id iaculis nibh efficitur in. Nulla nulla est, mollis sit amet nisi eget, interdum finibus ex. Etiam id risus ac elit sagittis ullamcorper volutpat dapibus lorem. Pellentesque ex metus, aliquam in massa in, tempor consequat nisi. Maecenas sollicitudin justo in sem dignissim, a ultricies justo commodo. Donec gravida blandit dui quis consectetur. Donec dictum ligula arcu, sit amet rutrum justo commodo quis. Nunc sed odio lacus. Nam placerat nibh ac dolor porta, non ultrices nisl ultrices. Maecenas pulvinar eu risus ac semper. Donec porta mi erat, eu sagittis felis viverra et. Cras eleifend velit sed dui pulvinar, ut molestie risus tempus.
<p>
Donec non vulputate nunc. Ut cursus nisi a nibh efficitur posuere. Nam eget arcu id quam lobortis vehicula eu sit amet mauris. In sit amet pharetra risus. Nunc blandit ex et metus cursus luctus. Maecenas ultrices lacus felis, bibendum faucibus diam euismod at. Nam quis odio viverra, ultricies nulla ac, euismod sem. Cras mollis a nunc in venenatis. Nullam luctus nibh nec enim luctus convallis. Sed nec lacinia libero. Integer eu tellus vestibulum, feugiat leo vel, iaculis augue. Maecenas a fermentum enim, at tempor nibh. Vivamus eros sem, posuere et porta eu, auctor pulvinar nunc. Nullam vel tellus posuere, venenatis lorem vitae, convallis leo.
<p>
Aliquam non bibendum mi, ac pretium ipsum. Etiam ut tempus nisi. Duis non pulvinar nulla, non mattis quam. Sed nulla mi, tempor vitae nibh vel, tristique cursus sem. Cras facilisis mollis consequat. Donec ipsum nulla, fermentum id dignissim a, rutrum ut leo. Quisque vitae varius sem. Mauris vel congue mi, congue eleifend sem. Integer finibus lacus tincidunt turpis lobortis, non vulputate lectus ultricies. Nunc dapibus lacus ipsum, non lobortis eros efficitur vel. Suspendisse potenti. Sed diam ex, sodales a felis quis, commodo varius odio. Aliquam imperdiet erat sed dui hendrerit, id vestibulum velit pharetra. Quisque augue nisi, semper mollis mattis vitae, laoreet non odio.
<p>
Phasellus vitae sapien eget eros fringilla efficitur id eget enim. Praesent elit lorem, congue at blandit in, vulputate a nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada lorem ut lorem auctor maximus. Aliquam risus magna, cursus vel nisi ut, ultrices sodales felis. Integer consectetur dui non massa suscipit, ut mattis sem vehicula. Curabitur rhoncus ligula et mauris commodo commodo. Donec scelerisque aliquam risus a interdum. Maecenas malesuada sem ex, vel fermentum mauris hendrerit sed. Etiam facilisis varius arcu, quis scelerisque enim congue sed.
</div>

<script>
$(window).scroll(function(){
    if ($(window).scrollTop() >= 100) {
        $('navigation').addClass('sticky-header');
    }
    else {
        $('navigation').removeClass('sticky-header');
    }
});
</script>

</body>
</html>