Question

我在这里开始使用响应式粘性侧边栏：http://codepen.io/cmegown/pen/fjqzH。我有粘性部分，它相对于原始视口宽度的宽度有响应。但是，如果向下滚动然后更改视口大小，您将看到侧边栏的宽度不会改变。

我知道我需要更新sidebarWidth变量，但我确定如何/在哪里做到这一点。

感谢任何帮助，谢谢！

修改在其他一些项目中，这种情况落后了，但我又回来了。我进一步了，但是如果用户向下滚动页面然后展开他们的浏览器（或旋转他们的设备），仍然无法弄清楚如何更新侧边栏宽度。我在JS面板中有一些注释代码，我离开了。

Answer 1

只需将宽度计算放在滚动功能中即可。

$(function () {
  // cache selectors
  var wrapper = $('.wrapper');
  var sidebar = $('.sidebar');

  // get some maths

  var sidebarTop = sidebar.offset().top;
  var sidebarOffset = 25; // is .wrapper padding

  // sticky logic
  $(window).on('scroll', function () {
    var windowTop = $(window).scrollTop();
    var sidebarWidth = Math.round(wrapper.width() * 0.3); // is .sidebar width
    if (sidebarTop < (windowTop + sidebarOffset)) {
      sidebar.css({
        position: 'fixed',
        top: sidebarOffset,
        width: sidebarWidth
      })
    } else {
      sidebar.css({
        position: 'static',
        width: '30%' // original CSS value
      })
    }
  })
})

那里有一点开销，因为每次滚动时都必须计算宽度。另一种方法是将它放入$(window).resize()函数中，以便在调整窗口大小时计算出宽度。

响应粘性侧边栏，需要更新宽度

1 个答案: