One Page Layout & Fixed Navbar

Membuat layout satu halaman dan menu tetap

by Miftah Faroq

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="wrapper">
		<div id="header">
			<h1>One Page Layout & Fixed Side Nav</h1>
		</div><!-- end of header -->
		<div id="nav-anchor"></div>
		<div id="content">
	            <nav>
	                <ul>
	                    <li><a href="#home">Home</a></li>
	                    <li><a href="#about">About</a></li>
	                    <li><a href="#gallery">Gallery</a></li>
	                    <li><a href="#contact">Contact</a></li>
	                </ul>
	            </nav>
			<div class="c-article">
				<section id="home">
					<h2>Home</h2>
					<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
				</section>

				<section id="about">
					<h2>About</h2>
					<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200...

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');

/* CSS Reset */

*{
	padding: 0;
	margin: 0;
}

/* body */

body{
	font-size: 15px;
    font-family: 'Roboto', sans-serif;

}

/* wrapper */

#wrapper{
	width: 800px;
	margin: auto;
}

/* header */

#header{
	height: 200px;
	background-color: #ecf0f1;
	margin-bottom: 10px;
}

#header h1{
	padding-left: 10px;
	padding-top: 10px;
}

/* content */
#content{
	height: 1600px;
}

.c-side{
	background-color: #ecf0f1;
	width: 100px;
	height: 125px;
	float: left; 
	padding: 10px;
	border-radius: 5px;
	position: fixed;
	top: 0;
    z-index: 10000;
    margin-top:12px;
}

.c-side ul li{
	list-style: none;
}

.c-side ul li a{
	text-decoration: none;
	color: #000000;
	text-transform: uppercase;
	margin: 5px 0;
	display: inline-block;
}

.c-side ul li a:hover{
	color: #ffff00;
}

.c-article{
	width: 650px;
	float: right;
	height: 1500px;
	padding: 10px;
}

.c-article p{
	line-height: 30px;
	font-size: 20px;
	font-weight: 300;
	padding-bottom: 20px;
}

/* footer */

#footer{
	background-color: #ecf0f1;
	text-align: center;
	height: 50px;
	line-height: 50px;
}

.fot-brand{
	color: #ffff00;
	text-decoration: none;
}

/* navigation */
nav {
    width:100px;
    background-color:rgb(240,240,240);
    padding:0 12px;
    float: left;
    height: 200px;
}

nav.stick {
    position: fixed;
    top: 0;
    z-index: 10000;
    margin-top:12px;
}


nav ul {
    list-style-type:none;
    margin:0;
    padding:0;
}

nav li {

}

nav li a {
    color:rgb(50,50,50);
    font-weight:700;
    margin: 10px 0px;
    display: inline-block;
}

a.nav-active {
    color:#ccc;
}



hr {
    border:none;
    background-color:rgb(220,220,220);
    height:12px;
    margin-bottom:18px;
}

JavaScript

$.scrollTo = $.fn.scrollTo = function(x, y, options){
    if (!(this instanceof $)) return $.fn.scrollTo.apply($('html, body'), arguments);

    options = $.extend({}, {
        gap: {
            x: 0,
            y: 0
        },
        animation: {
            easing: 'swing',
            duration: 600,
            complete: $.noop,
            step: $.noop
        }
    }, options);

    return this.each(function(){
        var elem = $(this);
        elem.stop().animate({
            scrollLeft: !isNaN(Number(x)) ? x : $(y).offset().left + options.gap.x,
            scrollTop: !isNaN(Number(y)) ? y : $(y).offset().top + options.gap.y
        }, options.animation);
    });
};
 
 $(document).ready(function(){
        
        /** 
         * This part does the "fixed navigation after scroll" functionality
         * We use the jQuery function scroll() to recalculate our variables as the 
         * page is scrolled/
         */
        $(window).scroll(function(){
            var window_top = $(window).scrollTop() + 12; // the "12" should equal the margin-top value for nav.stick
            var div_top = $('#nav-anchor').offset().top;
                if (window_top > div_top) {
                    $('nav').addClass('stick');
                } else {
                    $('nav').removeClass('stick');
                }
        });
        
        
        /**
         * This part causes smooth scrolling using scrollto.js
         * We target all a tags inside the nav, and apply the scrollto.js to it.
         */
        $("nav a").click(function(evn){
            evn.preventDefault();
            $('html,body').scrollTo(this.hash, this.hash); 
        });
        
        
        
        /**
         * This part handles the highlighting functionality.
         * We use the scroll functionality again, some array creation and 
         * manipulation, class adding and class removing, and conditional testing
         */
        var aChildren = $("nav...