"One Page Template"
Bootstrap 3.3.0 Snippet by Klak031

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <body id="page-top" data-spy="scroll" data-target="nav"> <!-- Top Navigation --> <nav class="navbar navbar-default navbar-custom navbar-fixed-top" id="nav"> <div class="container-fluid"> <!-- Progress Animation On Scroll --> <div class="progressContainer"> <div id="progress" class="progress"></div> </div> <!-- Progress Animation On Scroll End --> <div class="navbar-header"> <!-- Toggle button --> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top-navigation" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- Toggle button --> <!-- Brand --> <a class="navbar-brand" href="#section1"> Section 1 </a> <!-- Brand End --> </div> <div class="collapse navbar-collapse" id="top-navigation"> <!-- Top Navigation Links --> <ul class="nav navbar-nav navbar-right"> <li><a href="#section2">Section 2</a></li> <li><a href="#section3">Section 3</a></li> <li><a href="#section4">Section 4</a></li> <li><a href="#section5">Section 5</a></li> <li><a href="#section6">Section 6</a></li> </ul> <!-- Top Navigation Links End --> </div> </div> </nav> <!-- Top Navigation End --> <!-- Sections --> <!-- Section 1 --> <section class="section1" id="section1"> </section> <!-- Section 1 End --> <!-- Section 2 --> <section class="section2" id="section2"> </section> <!-- Section 2 End --> <!-- Section 3 --> <section class="section3" id="section3"> </section> <!-- Section 3 End --> <!-- Section 4 --> <section class="section4" id="section4"> </section> <!-- Section 4 End --> <!-- Section 5 --> <section class="section5" id="section5"> </section> <!-- Section 5 End --> <!-- Section 6 --> <section class="section6" id="section6"> </section> <!-- Section 6 End --> <!-- Sections End --> </body>
/* Top Navigation Shrink On Scroll */ .navbar-custom { margin-top: 10px; padding: 20px 0; border-bottom: none; background: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; color: #0258A4 !important; } .navbar-custom.top-collapse { margin-top: 10px; padding: 0; background-color: #0258A4; } /* Top Navigation Shrink On Scroll End */ /* Top Navigation Colors */ .navbar-custom.top-collapse .navbar-nav>.active>a:focus, .navbar-custom.top-collapse .navbar-nav>.active>a:hover, .navbar-custom.top-collapse a:hover { color: #FFFFFF !important; background-color: none; } .navbar-custom.top-collapse .navbar-nav>.active>a { color: #FFFFFF !important; background-color: #014785; } .hvr-bounce-to-right:before { background: #014785; } .navbar-custom a { color: #0258A4 !important; } .navbar-custom a:hover { color: #014785 !important; } .navbar-custom.top-collapse a { color: #FFFFFF !important; } /* Top Navigation Colors End */ /* Toggle Button Colors */ .navbar-custom .navbar-toggle .icon-bar { background-color: #0258A4; } .navbar-custom.top-collapse .navbar-toggle .icon-bar { background-color: #FFFFFF; } .navbar-custom .navbar-toggle { border: 2px solid #0258A4; } .navbar-custom.top-collapse .navbar-toggle { border: 2px solid #FFFFFF; } .navbar-custom .navbar-toggle:hover, .navbar-custom .navbar-toggle:focus { background: none; } /* Toggle Button Colors End */ /* Progress Animation On Scroll */ .progressContainer{ position: fixed; top: 0; left: 0; width: 100%; height: 10px; background-color: #FFFFFF; } .progress{ height: 10px; width: 0%; background: #0258A4; border-radius: 0; } /* Progress Animation On Scroll End */ /* Toggle Navigation Border Remove */ .navbar-collapse { border: none; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none; } /* Toggle Navigation Border Remove End */ /* Sections */ section { height: 100vh; } .section1, .section2, .section3, .section4, .section5, .section6 { background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .section1 { background-color: #ECECEC; } .section2, .section4, .section6 { background-color: #E1E1E1; } .section3, .section5 { background-color: #D1D1D1; } /* Sections End */ /* Google Chrome Scrollbar */ ::-webkit-scrollbar { width: 18px; } ::-webkit-scrollbar-track { background-color: #FFFFFF; } ::-webkit-scrollbar-thumb { background-color: #0258A4; } /* Google Chrome Scrollbar End */ /* Top Navigation Margin & Padding Fix */ ul.nav.navbar-nav.navbar-right { margin: 0px -15px } .container-fluid { padding-right: 15px; } /* Top Navigation Margin & Padding Fix End */
/* Toggle Navigation Close On Click */ $('.navbar-collapse').click(function() { $('.navbar-collapse').collapse('hide'); }); /* Toggle Navigation Close On Click End */ /* Top Navigation Shrink On Scroll */ function collapseNavbar() { if ($('.navbar').offset().top > 250) { $('.navbar-fixed-top').addClass('top-collapse'); } else { $('.navbar-fixed-top').removeClass('top-collapse'); } } $(window).scroll(collapseNavbar); $(document).ready(collapseNavbar); /* Top Navigation Shrink On Scroll End */ /* Progress Animation On Scroll */ function updateProgress(num1, num2){ var percent = Math.ceil( num1 / num2 * 100 ) + '%'; document.getElementById('progress').style.width = percent; } window.addEventListener('scroll', function(){ var top = window.scrollY; var height = document.body.getBoundingClientRect().height - window.innerHeight; updateProgress(top, height); }); /* Progress Animation On Scroll End */ /* Smooth Scrolling on Click */ $('#nav .navbar-nav li>a, .navbar-header>a, .fa-caret-up').click(function(){ var link = $(this).attr('href'); var position = $(link).offset().top; $('body,html').animate({ scrollTop: position }, 1000); }); /* Smooth Scrolling on Click End */

Related: See More


Questions / Comments: