如果向下滚过屏幕，请将div粘贴到屏幕顶部[重复]

6 回答

• 2

  诀窍是你必须将它设置为position：fixed，但仅在用户滚过它之后 .

  这是通过这样的方式完成的，将处理程序附加到window.scroll事件

  // Cache selectors outside callback for performance. 
     var $window = $(window),
         $stickyEl = $('#the-sticky-div'),
         elTop = $stickyEl.offset().top;
  
     $window.scroll(function() {
          $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
      });
  

  这只是在页面滚过它时添加一个 sticky CSS类，并在它备份时删除该类 .

  CSS类看起来像这样

  #the-sticky-div.sticky {
       position: fixed;
       top: 0;
    }
  

  编辑 - 修改代码来缓存jQuery对象，现在更快 .

  回复于 2024-05-16T14:16:38+08:00
• 2

  使无限的答案在没有闪烁的情况下工作的技巧是将滚动检查放在另一个div上，然后是你想要修复的div .

  源自代码viixii.com使用我最终使用此：

  function sticky_relocate() {
      var window_top = $(window).scrollTop();
      var div_top = $('#sticky-anchor').offset().top;
      if (window_top > div_top)
          $('#sticky-element').addClass('sticky');
      else
          $('#sticky-element').removeClass('sticky');
  }
  
  $(function() {
      $(window).scroll(sticky_relocate);
      sticky_relocate();
  });
  

  这样，只有在到达粘性锚点时才会调用该函数，因此不会删除并在每个滚动事件上添加“.sticky”类 .

  现在它在粘性锚到达顶部时添加粘性类，并在粘性锚返回视图时将其删除 .

  只需在你想要修复的元素上方放置一个空类div，其类似于一个锚 .

  像这样：

  <div id="sticky-anchor"></div>
  <div id="sticky-element">Your sticky content</div>
  

  该代码的所有功劳都归于viixii.com

  回复于 2024-05-16T14:16:38+08:00
• 3

  你应该尝试使用waypoints jQuery插件 .

  http://imakewebthings.com/waypoints/shortcuts/sticky-elements/

  我认为它完全符合您的要求，并且没有闪烁 . 但是，从内存来看，我认为它在Mobile Safari（YMMV）中效果不佳 .

  “纽约时报”最近就是一个很好的例子：

  http://www.nytimes.com/interactive/2010/11/13/weekinreview/deficits-graphic.html

  页面中的框图形不会滚动到页面顶部 .

  回复于 2024-05-16T14:16:38+08:00
• 141

  有一个previous question today（没有答案）给了good example of this functionality . 您可以查看relevant source code for specifics（搜索"toolbar"），但基本上他们使用webdestroya的解决方案和一些JavaScript的组合：

  • 页面加载和元素是位置：静态

  • 在滚动时，测量位置，如果元素是位置：静态并且它离开页面，则元素将翻转到位置：固定 .

  我建议检查前面提到的源代码，因为它们确实处理了一些您可能不会立即想到的“陷阱”，例如在单击锚链接时调整滚动位置 .

  回复于 2024-05-16T14:16:38+08:00
• 0

  我为此创建了一个jQuery插件 . 很想得到一些反馈，因为这是我的第一个 . https://github.com/dubroe/sticky-div

  回复于 2024-05-16T14:16:38+08:00
• 19

  使用 position:fixed; 并设置 top:0;left:0;right:0;height:100px; ，你应该可以将它"stick"放在页面顶部 .

  <div style="position:fixed;top:0;left:0;right:0;height:100px;">Some buttons</div>
  

  回复于 2024-05-16T14:16:38+08:00