向下滚动到屏幕上方时，div会紧贴屏幕顶部

一尘不染

向下滚动到屏幕上方时，div会紧贴屏幕顶部

html

我有一个div，当我的页面首次加载时，它离顶部约100像素（该页面包含一些按钮等）。

当用户滚动通过它时，我希望div“关注”该用户，因为它附着在屏幕顶部。当用户返回页面顶部时，我希望它返回到其原始位置。

Visualization - xxxxx is the div:

Default (page load)          User vertically scrolled well past it
---------                    ---------
|       |                    |xxxxxxx| < after div reaches top of screen when
|xxxxxxx|                    |       |   page is scrolled vertically, it stays
|       |                    |       |   there
---------                    ---------

阅读 231

2020-05-10

共1个答案

一尘不染

诀窍是您必须将其设置为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对象。

2020-05-10