<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 ---------->
<div class="container" id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top"><img height="32px" src="http://francoiseclasensophro.fr/images/logovert.jpg" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right ">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Scrolling Nav</h1>
<p><strong>Usage Instructions:</strong> Make sure to include the <code>scrolling-nav.js</code>, <code>jquery.easing.min.js</code>, and <code>scrolling-nav.css</code> files. To make a link smooth scroll to another section on the page, give the link the <code>.page-scroll</code> class and set the link target to a corresponding ID on the page.</p>
<a class="btn btn-default page-scroll" href="#about">Click Me to Scroll Down!</a>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>About Section</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id tincidunt risus. Aenean cursus aliquam sem at venenatis. Quisque vel pretium nisi. Ut tempus condimentum orci, a suscipit arcu. Quisque ultrices accumsan arcu, at viverra eros lobortis non. Etiam neque risus, ultrices vel lorem sed, blandit sagittis felis. Integer vitae eros at augue ullamcorper maximus a eget ante. Integer facilisis ullamcorper velit, ut consequat tellus lobortis vel. Proin lobortis accumsan quam, in rutrum mauris dictum tincidunt. Nullam imperdiet mi lacinia malesuada egestas. Praesent semper magna augue, a ullamcorper nulla tincidunt id. Aenean sed arcu vel augue lacinia tristique. Aenean placerat aliquam purus vehicula vehicula. Nullam tortor magna, vestibulum bibendum ex ac, pellentesque ultrices sem.</p>
<p>Ipsum dolor sit amet, consectetur adipiscing elit. Proin id tincidunt risus. Aenean cursus aliquam sem at venenatis. Quisque vel pretium nisi. Ut tempus condimentum orci, a suscipit arcu. Quisque ultrices accumsan arcu, at viverra eros lobortis non. Etiam neque risus, ultrices vel lorem sed, blandit sagittis felis. Integer vitae eros at augue ullamcorper maximus a eget ante. Integer facilisis ullamcorper velit, ut consequat tellus lobortis vel. Proin lobortis accumsan quam, in rutrum mauris dictum tincidunt. Nullam imperdiet mi lacinia malesuada egestas. Praesent semper magna augue, a ullamcorper nulla tincidunt id. Aenean sed arcu vel augue lacinia tristique. Aenean placerat aliquam purus vehicula vehicula. Nullam tortor magna, vestibulum bibendum ex ac, pellentesque ultrices sem.</p>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="services-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Services Section</h1>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Contact Section</h1>
</div>
</div>
</div>
</section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
@import url('https://fonts.googleapis.com/css?family=Architects+Daughter');
/*!
* Start Bootstrap - Scrolling Nav HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
width: 100%;
height: 100%;
font-family: 'Architects Daughter', cursive;
font-size: 18px;
}
html {
width: 100%;
height: 100%;
}
@media(min-width:767px) {
.navbar {
padding: 20px 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
}
}
/* Demo Sections - You can use these as guides or delete them - the scroller will work with any sort of height, fixed, undefined, or percentage based.
The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children
of those sections to manage the look and feel of the site. */
.intro-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
}
.about-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
.services-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
}
.contact-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
