頂部菜單的 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。 這可以解釋為什么您的第二張圖片在第一張圖片下方移動。