如何在使用jQuery在页眉和页脚之间滚动时使侧边栏变粘（不滚动它们）？

我需要一个严格的jQuery解决方案来解决这个问题。 这是因为我正在使用Wordpress，而我想制作粘贴的侧边栏小部件位于

元素内部，我无法完全达到高度。

就像.scrollTop()检测页面向下走多远使侧边栏小部件变粘的方式一样，我需要JS检测我从页面底部到底是多远，通过指定一个新的固定位置来“取消”小部件。

我尝试使用.offset()进行此操作，但到目前为止我还无法使其工作。

  function stopDiv() { var distance = $('.footer').offset().top - $('.widget').offset().top; if (distance < 10) { $('.widget').css({ 'top': 'auto', 'bottom': '10px' }); } } 

你可以在我的侧栏下方的片段中看到它应该滚动，但我希望侧边栏在距离页脚距离<10px时采用新的固定位置。

我希望侧边栏在页脚上方采用新的固定位置，直到用户向上滚动。

编辑： @Benvc下面建议的解决方案在片段中工作正常，但在我的wordpress网站上没有。 以下是我得到的控制台错误：

 scripts.js:18 Uncaught ReferenceError: s is not defined at HTMLDocument. (scripts.js:18) at i (jquery.js:2) at Object.fireWith [as resolveWith] (jquery.js:2) at Function.ready (jquery.js:2) at HTMLDocument.K (jquery.js:2) at HTMLDocument.s (VM11874 rocket-loader.min.js:1) at p (VM11874 rocket-loader.min.js:1) at t.simulateStateAfterDeferScriptsActivation (VM11874 rocket-loader.min.js:1) at Object.callback (VM11874 rocket-loader.min.js:1) at t.run (VM11874 rocket-loader.min.js:1) 

  // Fixed Widget function fixDiv() { var $cache = $('.widget'); if ($(window).scrollTop() > 380) $cache.css({ 'position': 'fixed', 'top': '10px', 'right': '30px' }); else $cache.css({ 'position': 'relative', 'top': 'auto', 'right': 'auto' }); } $(window).scroll(fixDiv); fixDiv(); /* My attempt function stopDiv() { var distance = $('.footer').offset().top - $('.widget').offset().top; if (distance < 10) { $('.widget').css({ 'top': 'auto', 'bottom': '10px' }); } } $(window).scroll(stopDiv); stopDiv(); */ 

 @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700'); * { font-family: 'Open Sans'; color: #fff; box-sizing: content-box; } body { padding: 0; margin: 0; } p { margin: 20px; } hr { width: 85%; border-style: solid; } .main-content { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 150px auto; grid-template-areas: "nav nav nav nav" "main main main sidebar"; grid-column-gap: 20px; grid-row-gap: 0px; } .nav { grid-area: nav; background-color: #266392; display: grid; grid-template-columns: 1fr 3fr 1fr; } .nav h1 { place-self: center; font-weight: 400; font-size: 40px; grid-column: 2; } .nav i { align-self: center; font-size: 40px; } .main { height: 1500px; width: 98%; justify-self: start; grid-area: main; padding: 10px; float: left; background-color: #e8624c; margin: 10px; } .sidebar-container { height: 900px; width: 300px; justify-self: start; background-color: #209B66; grid-area: sidebar; grid-column: 4; top: 10px; margin: 10px; padding: 20px; display: grid; grid-template-rows: auto; grid-row-gap: 10px; } .sidebar-container>p { display: grid; align-items: start; padding: 0; margin: 0; } .widget { height: 500px; width: 300px; background-color: #E3962F; } .footer { background-color: #333; height: 800px; } 

   
 
 
Sticky Sidebar Problem
  
 
 
 [Main Content] 
 
 
 
[Sidebar Container]
 
 
 [Widget]
 
 
 
 
  

Answer 1

编辑 – jquery解决方案（原始css仅在下面回答）：

根据您的问题编辑提供额外的约束并使html / css唯一的解决方案更加困难，下面是一个jquery解决方案，使用您的代码使用新的jquery为粘性侧边栏小部件和css使侧边栏小部件position: absolute和right: 30px （该值是任意的，具体取决于您希望窗口小部件位于侧边right: 30px确切位置）。 另外，注释掉一些其他css行，这些行或者没有做任何事情或者干扰了网格布局的响应性（粘性侧边栏function可以使用或不使用这些更改，尽管您可能需要调整窗口小部件元素的right css，包括媒体查询，具体取决于您的布局最终结束的位置）。

 $(function() { const sidebar = $('.sidebar-container'); const widget = $('.widget'); const footer = $('.footer'); const space = 10; // arbitrary value to create space between the window and widget const startTop = sidebar.offset().top + 60; // arbitrary start top position const endTop = footer.offset().top - widget.height() - space; widget.css('top', startTop); $(window).scroll(function() { let windowTop = $(this).scrollTop(); let widgetTop = widget.offset().top; let newTop = startTop; if (widgetTop >= startTop && widgetTop <= endTop) { if (windowTop > startTop - space && windowTop < endTop - space) { newTop = windowTop + space; } else if (windowTop > endTop - space) { newTop = endTop; } widget.stop().animate({ 'top': newTop }); } }); }); 

 @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700'); * { font-family: 'Open Sans'; color: #fff; box-sizing: content-box; } body { padding: 0; margin: 0; } p { margin: 20px; } hr { width: 85%; border-style: solid; } .main-content { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 150px auto; grid-template-areas: "nav nav nav nav" "main main main sidebar"; grid-column-gap: 20px; grid-row-gap: 0px; } .nav { grid-area: nav; background-color: #266392; display: grid; grid-template-columns: 1fr 3fr 1fr; } .nav h1 { place-self: center; font-weight: 400; font-size: 40px; grid-column: 2; } .nav i { align-self: center; font-size: 40px; } .main { height: 1500px; /*width: 98%; justify-self: start;*/ grid-area: main; padding: 10px; /*float: left;*/ background-color: #e8624c; margin: 10px; } .sidebar-container { height: 900px; width: 300px; justify-self: end; background-color: #209B66; grid-area: sidebar; grid-column: 4; /*top: 10px;*/ margin: 10px; padding: 20px; display: grid; grid-template-rows: auto; grid-row-gap: 10px; } .sidebar-container>p { display: grid; align-items: start; padding: 0; margin: 0; } .widget { height: 500px; width: 300px; background-color: #E3962F; position: absolute; right: 30px; } .footer { background-color: #333; height: 800px; } 

  
 
 
Sticky Sidebar Problem
  
 
 
 [Main Content] 
 
 
 
[Sidebar Container]
 
 
 [Widget]
 
 
 
 
   

Answer 2

我们可以将其分解为两个不同的问题。 问题＃1，您需要元素（a）的底部Y和弦，而问题＃2需要页面底部（b）。 如果您有这些数据，那么您的答案就是（b – a）。

为了帮助我们，让我们创建一个辅助函数：

 function getOffset(el) { const rect = el.getBoundingClientRect(); return { left: rect.left + window.scrollX, right: rect.left - window.scrollX, top: rect.top + window.scrollY, bottom: rect.bottom -window.scrollY }; } 

使用它，它应该像getOffset(document.body).bottom - getOffset(yourElement).bottom一样简单。

希望这可以帮助！

（请注意，我现在无法实际测试此代码，因此它可能无法开箱即用，因此请将其用作指南而不是复制/粘贴）。