The div content covered by navmenu when use href anchor. The div begenning also need to show on anchor click. Is there any option to make a distance to the menu when click on anchor ?
Demo: http://codepen.io/anon/pen/LVKBpW
$(document).ready(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});body {
position: relative;
}
.affix {
width: 100%;
}
#section1 {
background-color: #1E88E5;
}
#section2 {
background-color: #673ab7;
}
#section3 {
background-color: #ff9800;
}
#section41 {
background-color: #00bcd4;
}
#section42 {
background-color: #009688;
}
.customdiv {
height: 500px;
color: #fff;
}
.navbar-default {
margin-bottom: 0;
background-color: transparent;
border: none;
}
.navbar-default.affix {
margin: auto;
right: 0;
left: 0;
transition: all .6s ease-in-out;
}
.navbar-default.affix + .container-fluid {
/* padding-top: 70px */
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body data-spy="scroll" data-target=".navbar" data-offset="1">
<nav class="navbar navbar-inverse navbar-static-top" data-spy="affix" data-offset-top="1">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#section1">Section 1</a>
</li>
<li><a href="#section2">Section 2</a>
</li>
<li><a href="#section3">Section 3</a>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#section41">Section 4-1</a>
</li>
<li><a href="#section42">Section 4-2</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div id="section1" class="container-fluid customdiv">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid customdiv">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid customdiv">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section41" class="container-fluid customdiv">
<h1>Section 4 Submenu 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section42" class="container-fluid customdiv">
<h1>Section 4 Submenu 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling! s</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</body>
