CSS3 Fixed and scrolling header and footers

One semi-fixed header with top scroll, late fixed/sticky, then another sticky footer - utilizing css position: fixed;

by andioak

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="wrapper">

            <header id="header" class="full-header">

                <div id="header-wrap">

                    <div class="container clearfix">

                        <div id="primary-menu-trigger"><i class="icon-reorder"></i></div>

                        <div id="logo">
                            <a href="index.html" class="standard-logo" data-dark-logo="images/logo-dark.png"><img src="images/logo.png" alt="Canvas Logo"></a>
                            <a href="index.html" class="retina-logo" data-dark-logo="images/[email protected]"><img src="images/[email protected]" alt="Canvas Logo"></a>
                        </div><!-- #logo end -->

                        <nav id="primary-menu">
                            <ul class="sf-js-enabled" style="touch-action: pan-y;">
                                <li><a href="page-2.html"><div>page 2</div></a></li>
                                <li class="sub-menu"><a href="about.html" class="sf-with-ul"><div>about us</div></a></li>
                                <li><a href="contact.html"><div>contact us</div></a></li>
                            </ul>
                        </nav><!-- #primary-menu end -->

                    </div>

                </div>

            </header>

            <div class="container">

                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor...

CSS

html, body { margin: 0; padding: 0; }
.wrapper { margin: 0; padding: 0; width: 100%; }
#header { 
	width: 100%; height: 40px; 
	background-color: #222; 
	align-items: center; 
	position: fixed;
	top: 0; left: 0; 
	
}

#header ul { 
	display: inline-block; 
	text-align: center;
}
#header ul li { 
	display: block; }
#header ul { display: inline-block; }