My website page is divided into four sections, each with a width and height of 100%. I am using scrollify to ensure that the browser window snaps to each section.
I need a fixed header to be displayed only when either section #b or #c is in view.
The header should fade in and out, disappearing once section #a or #d comes into focus.
I am new to JavaScript and would greatly appreciate a fully functional solution that works with my existing code snippet.
$(function() {
$.scrollify({
section: "section",
easing: "swing",
scrollSpeed: 500,
offset: 0,
scrollbars: true,
before: function() {},
after: function() {},
afterResize: function() {}
});
});body {
width: 100%;
margin: 0;
}
#header {
background: rgba(0, 0, 0, 0.8);
z-index: 1;
width: 100%;
height: 50px;
position: fixed;
top: 0;
left: 0;
}
section {
width: 100%;
height: 100vh;
}
#a {
background: #aaa;
}
#b {
background: #bbb;
}
#c {
background: #ccc;
}
#d {
background: #ddd;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/0.1.11/jquery.scrollify.min.js">
</script>
<div id="header">
</div>
<section id="a">
</section>
<section id="b">
</section>
<section id="c">
</section>
<section id="d">
</section>