Question

将div与页面一起滚动的最佳方法是什么？

确切的效果是@ http://store.apple.com/（在产品添加到购物车后的结帐摘要中）

编辑：或this example - 唉，它不像我想的那样顺利= /

Answer 1

在第二个例子中，他们使用jQuery来执行此操作。捕获窗口对象的滚动事件，并使用animate()函数动态更改div的位置。

Answer 2

本教程可以帮助您：http://css-tricks.com/scrollfollow-sidebar/

Answer 3

jQuery再次保存了一天！

CSS：

#wrapper {
  position: absolute;
  width: 200px;
}

#fancyDiv {
  position: absolute;
  top: 0;
}

#fancyDivt.fixed {
  position: fixed;
  top: 0;
}

HTML：

<div id="commentWrapper">
  <div id="comment">
    <p>some text</p>
  </div>
</div>

jQuery的：

$(document).ready(function() {
    $(function () {
        var top = $('#fancyDiv').offset().top - parseFloat($('#fancyDiv').css('margin-top').replace(/auto/, 0));
        $(window).scroll(function (event) {
              // what the y position of the scroll is
              var y = $(this).scrollTop();

              // whether that's below the div
              if (y >= top) {
                // if so, ad the fixed class
                $('#fancyDiv').addClass('fixed');
              } else {
                // otherwise remove it
                $('#fancyDiv').removeClass('fixed');
              }
        });
    }
});

在容器内修复图像

3 个答案: