jquery 滚动问题，元素没有停留在原位？

Question

我有这个 jquery 片段，它使元素在向下滚动时保持在顶部可见:

            var $window = $(window),
            $stickyEl = $('.rightcol'),
            elTop = $stickyEl.offset().top;
            $window.scroll(function() {
              var windowTop = $window.scrollTop();
              $stickyEl.toggleClass('sticky', windowTop > elTop);

        });

CSS:

.rightcol.sticky {
      position: fixed;
      top: 0;
    }

当我滚动时，右列确实停留在顶部，但它向左移动，它应该在右侧，在滚动或页面加载之前，元素应该位于第一个位置。我该如何解决这个问题。

Answer 1

您的问题是您已将滚动元素设置为 float: right 并将其设置为 position: fixed，这将与 float 相矛盾。

当您设置元素的 float 属性时，您是在告诉文档的其余部分让其他内容适合该元素周围。

当您将元素的 position 属性设置为 fixed 或 absolute 时，您会将其从文档的正常流中移除。这意味着元素消耗的空间将不再被考虑，即它不会影响其他元素。这意味着如果您尝试在固定定位之外设置 float ，文档的其余部分将不会围绕元素流动，因为不会考虑元素的空间。

看看这些:

• > Making Fixed floating element scrolling smoothly in Firefox and Chrome
• > fixed/floating div element when scrolling