CSS - Fixed menu button reveal on scroll

Question

I am trying to implement a fixed menu button in my layout, each section has its own unique menu button and I would like each one to reveal as they are scrolled but keep the position fixed.

I have this so far....

 body,html { margin:0; padding:0; } .menu { position:fixed; top:10px; left:10px; } .section1_menu, .section2_menu, .section3_menu, .section4_menu { position:fixed; top:10px; left:10px; } .section1_menu img, .section2_menu img, .section3_menu img, .section4_menu img, .menu img { width:50px; height:50px; } .section1 { display:flex; align-items:center; justify-content:center; background:teal; width:100%; height:100vh; color:white; } .section2 { display:flex; align-items:center; justify-content:center; background:wheat; width:100%; height:100vh; color:white; } .section3 { background:gold; width:100%; height:100vh; display:flex; align-items:center; justify-content:center; } .section4 { background:lightblue; width:100%; height:100vh; display:flex; align-items:center; justify-content:center; } 

 <div class="menu"> <img src="https://png.icons8.com/dusk/1600/menu.png"> </div> <div class="container"> <div class="section1"> <div class="section1_menu"> <img src="https://png.icons8.com/wired/1600/menu.png"> </div> This is the section 1 content </div> <div class="section2"> <div class="section2_menu"> <img src="https://png.icons8.com/ultraviolet/1600/menu.png"> </div> This is the section 2 content </div> <div class="section3"> <div class="section3_menu"> <img src="https://png.icons8.com/nolan/1600/menu.png"> </div> This is the section 3 content </div> <div class="section4"> <div class="section4_menu"> <img src="https://png.icons8.com/linen/1600/menu.png"> </div> This is the section 4 content </div> </div> 

I am struggling to work out how to implement the reveal, currently they are all positioned correctly but stacked on top of each other. If it could be done in CSS that would be ideal but am also open to using some JS if needed.

I have looked at CSS Clipping but not sure if this is the best approach, anyone any ideas?

Answer 1

Hi there you can use jquery for that feature,

see this fiddle https://jsfiddle.net/gnmqwfck/

i just use scroll method to provide the solutions

$(window).scroll(function() {
     var wH = $(window).height(),
         wS = $(this).scrollTop();
     if (wS > ($('.section1').offset().top+$('.section1').outerHeight()-wH)){
         $('.section1_menu').show();
         $('.section2_menu').hide();
         $('.section3_menu').hide();
         $('.section4_menu').hide();
     }
});