Question

如何在向下滚动后让div停留在屏幕上，它会粘在窗口的顶部，并在用户向下滚动时跟随用户...我在这里尝试了答案但仍然无法正常工作..真的需要帮助...

问题出在这里!!!

<div id="mainMenuBarAnchor"></div>
<div id="left_content" class="left_content">
  <ul class="left_menu">    
    <li class="odd"><a href="#">Latest</a></li>
    <li class="even"><a href="#">Size</a></li>
    <li class="odd"><a href="#">Color</a></li>
    <li class="even"><a href="#">Price</a></li>
  </ul>
</div>

Answer 1

您可以使用CSS position属性执行此操作。您还需要通过标题的高度来偏移页面的主体，以便在初始页面加载时不会切断任何内容。

Answer 2

您应该使用CSS执行此操作，如下所示。

<style>
    #mainMenuBarAnchor {
        position: fixed;
        top: 0;
        right: 50%;
    }   
</style>

无论用户滚动，div内容都将保留在页面的中间位置。有关详细信息，请参阅here。

这是完整的HTML，方便您使用。

    <style>
        #mainMenuBarAnchor {
            position: fixed;
            top: 0;
            right: 50%;
        }   
    </style>    
    <div id="mainMenuBarAnchor">Top Anchor</div>
    <div id="left_content" class="left_content">
      <ul class="left_menu">    
        <li class="odd"><a href="#">Latest</a></li>
        <li class="even"><a href="#">Size</a></li>
        <li class="odd"><a href="#">Color</a></li>
        <li class="even"><a href="#">Price</a></li>
      </ul>
    </div>

如何让div留在屏幕的顶部？向下滚动后，它应保持原位，在向上滚动后，它会向下移动

2 个答案: