使用jQuery / javascript和scrollify查看某些部分时显示div

Question

I have a website page with four sections which are 100% width and height, and I'm using scrollify so the browser window always snaps to a section.

1. I have a fixed header that I want to display only while either of the middle two sections ( #b and #c ) are in view.

2. I'd like for this header to fade in and fade out. It should be gone by the time section #a or #d is snapped to.

I'm a novice at writing Javascript, so a fully functional solution which works with my code snippet would be much appreciated.

 $(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> 

Answer 1

You can use before event of scrollify. In this event you should get a current slide with the method $.scrollify.current(); You can find all available methods here ! And depending on your slide you can hide or show your header. Simply use if (){} else {} construction. Example:

if (currentSlide != 1 || currentSlide != 3) {
 header.show();
} else {
 header.hide();
}

or just add some class to header

if (currentSlide != 1 || currentSlide != 3) {
 header.addClass('is-shown');
} else {
 header.removeClass('is-shown');
}

https://jsfiddle.net/2Lo92L6s/

Answer 2

You can solve it by jquery.you have to capture section load event and check the section id.if its is #a or #d you have to use:

if(id == "a" or id == "b")
{
   $("#header").hide();
}
else{
   $("#header").show();
}