顶部菜单的 position 已修复但在下一个 div 的滚动部分消失

Question

div class="first" 是一个顶部菜单，我想尝试将其固定在滚动条上，所以我使用了这段代码，一切正常，但问题是当我开始滚动下一张图片的一半时 mid-top.jpeg在下一个 div class="second" 中消失。

就像图像 mid-top.jpeg 位于图像 top.jpeg 之下

我怎样才能解决这个问题？ 谢谢！

 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

您只能使用 CSS 解决此问题。

将 .first 设置为.first position: fixed

使用margin-top将.second垂直偏移.first的高度

 .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

img top.jpeg 应该是固定菜单的一部分吗？ 如果不是，则应将其移出 the.first div。 这可以解释为什么您的第二张图片在第一张图片下方移动。