add section to header
by mrjordy
HTML
<div class="header"><div class="companyName">company name</div> <div class="breadcrumish">></div><div class="breadcrumInsert"></div></div>
<div id="section-one">one</div>
<div class="spacer"></div>
<div id="section-two">two</div>
<div class="spacer"></div>
<div id="section-three">three</div>
<div class="spacer"></div>
<div id="section-four">four</div>
<div class="spacer"></div>
<div id="section-five">five</div>
<div class="spacer"></div>
<div id="section-six">six</div>
<div class="spacer"></div>
CSS
.header {
position: fixed;
background: grey;
height: 40px;
top: 0;
display: block;
width: 100%;
color: white;
}
.companyName {
display: inline-block;
}
.breadcrumish {
color: red;
font-weight: bold;
opacity: 0;
display: inline-block;
}
.breadcrumish.visible {
opacity: 1;
}
.breadcrumInsert {
display: inline-block;
}
.spacer {
height: 140vh;
}
JavaScript
$(window).scroll(function() {
var Scroll = $(window).scrollTop() + 1,
SectionOneOffset = $('#section-one').offset().top,
SectionTwoOffset = $('#section-two').offset().top,
SectionThreeOffset = $('#section-three').offset().top,
SectionFourOffset = $('#section-four').offset().top,
SectionFiveOffset = $('#section-five').offset().top,
SectionSixOffset = $('#section-six').offset().top;
if (Scroll >= SectionOneOffset) {
$(".breadcrumInsert").text('');
$(".breadcrumish").removeClass("visible");
}
if (Scroll >= SectionTwoOffset) {
$(".breadcrumInsert").text('two!');
$(".breadcrumish").addClass("visible");
}
if (Scroll >= SectionThreeOffset) {
$(".breadcrumInsert").text('three!');
$(".breadcrumish").addClass("visible");
}
if (Scroll >= SectionFourOffset) {
$(".breadcrumInsert").text('four!');
$(".breadcrumish").addClass("visible");
}
if (Scroll >= SectionFiveOffset) {
$(".breadcrumInsert").text('five!');
$(".breadcrumish").addClass("visible");
}
if (Scroll >= SectionSixOffset) {
$(".breadcrumInsert").text('six!');
$(".breadcrumish").addClass("visible");
}
});