1

我有一个从这里开始的响应式粘性侧边栏：http: //codepen.io/cmegown/pen/fjqzH。我已经把粘性部分放下了，它对原始视口宽度的宽度有响应。但是，如果您向下滚动然后更改视口大小，您会看到侧边栏的宽度没有改变。

我知道我需要更新sidebarWidth变量，但我确定如何/在哪里执行此操作。

任何帮助表示赞赏，谢谢！

编辑： 这种在其他一些项目中被遗忘了，但我回来完成这个。我走得更远了，但如果用户向下滚动页面然后展开他们的浏览器（或旋转他们的设备），我似乎仍然无法弄清楚如何更新侧边栏的宽度。我在我离开的 JS 面板中有一些注释代码。

4

1 回答 1

0

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

$(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()函数中，以便在调整窗口大小时计算出宽度。

于 2013-07-22T19:39:24.943 回答