top menu's position fixed but on scroll part from next div disappears

Question

The div class="first" is a top menu that I wanna try to make it fix on scroll so I used this code, everything is working fine but the problem is that when I start scrolling half of the next image mid-top.jpeg in the next div class="second" disappear.

it is like image mid-top.jpeg comes under the image top.jpeg

How can I fix this? thanks!

 var fixmeTop = $('.first').offset().top; $(window).scroll(function() { var currentScroll = $(window).scrollTop(); if (currentScroll >= fixmeTop) { $('.first').css({ position: 'fixed', top: '0', }); } else { $('.first').css({ position: 'static' }); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="first"> <img src="images/top.jpeg" alt=""> <map name=""> <area target="" alt="" title="home" href="index.html" coords="1,60,95,115" shape="rect"> </map> </div> <div class="second"> <img src="images/mid-top.jpeg" alt=""> <!--problem here--> <map name=""> <area shape="" coords="" href="" alt=""> </map> </div>

Answer 1

You can solve this with CSS only.

Set .first to position: fixed

Vertically offset .second by the height of .first using margin-top

 .first { height: 150px; position: fixed; top: 0; }.second { margin-top: 150px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="first"> <img src="https://via.placeholder.com/350x150"> <map name=""> <area target="" alt="" title="home" href="index.html" coords="1,60,95,115" shape="rect"> </map> </div> <div class="second"> <img src="https://via.placeholder.com/350x150"> <map name=""> <area shape="" coords="" href="" alt=""> </map> </div>

Answer 2

Is img top.jpeg suppose to be part of the fixed menu? If not, it should be moved out of the.first div. That could explain why your second image is moving under the first.