<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<ul class="nav navbar-nav">
<li><a class="anchorLink" href="#one">Red</a></li>
<li><a class="anchorLink" href="#two">Green</a></li>
</ul>
<section id="one">
<div class="container">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since
</div>
</section>
<section id="two">
<div class="container">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since
</div>
</section>
ul.nav {
width:100%;
background:#000;
position:fixed;
}
ul.nav li {
float:left;
display:inline-block;
}
ul.nav li a {
float:left;
display:inline-block;
}
section {
height:500px;
}
#one {background:#f33;}
#two {background:green;}
$(document).ready(function(){
$(function() {
// grab the initial top offset of the navigation
var sticky_navigation_offset_top = $('#site-header').offset().top;
// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
// if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
var header_height = $('#site-header').height() + 'px';
if ((scroll_top > sticky_navigation_offset_top)||(scroll_top > 1)) {
$('#site-header').addClass('fixed-header');
//$('body').css({ 'padding-top': header_height});
}
else {
$('#site-header').removeClass('fixed-header');
//$('body').css({ 'padding-top': '0px'});
}
/*var width = $(window).width();
if(width < 767) {
$('.navbar').css({ 'position': 'static', 'margin-bottom':'0px', 'background-color':'#000', 'border-width':'1px' });
$('body').css({ 'padding-top':'0px'});
}
*/
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
});
});
jQuery.fn.anchorAnimate = function(settings) {
settings = jQuery.extend({
speed : 900
}, settings);
return this.each(function(){
var caller = this
$(caller).click(function (event) {
event.preventDefault()
var locationHref = window.location.href
var elementClick = $(caller).attr("href")
var destination = $(elementClick).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
window.location.hash = elementClick;
});
return false;
})
})
}
jQuery(document).ready(function($){
$('a.anchorLink').anchorAnimate();
$('a.anchorLink').click(function(){
$('a.anchorLink').removeClass('active');
$(this).addClass('active');
});
});
