滚动页面时如何使 <div> 上下移动？答案

【问题标题】：How do I make a <div> move up and down when I'm scrolling the page?滚动页面时如何使 <div> 上下移动？
【发布时间】：2010-12-10 23:12:52
【问题描述】：

当用户滚动页面时，如何使 div 元素在页面上上下移动？（该元素始终可见）

【问题讨论】：

标签： javascript jquery css html

【解决方案1】：

您想将固定属性应用到元素的位置样式。

position: fixed;

您使用的是什么浏览器？并非所有浏览器都支持固定属性。阅读更多关于谁支持它，谁不支持它以及一些工作在这里

http://webreflection.blogspot.com/2009/09/css-position-fixed-solution.html

【讨论】：

@Jason，尽管我完全同意这种观点，但在企业环境中，这可能不是一个选择。一些公司由于各种原因不能/不会升级（比如被供应商从技术上扣为人质……另一个故事，下次再说）。如果她/他需要支持它，那么她/他需要支持它。
我希望我可以下载投票的 cmets。解雇供应商并继续前进，这将是非常值得的。或者说服管理层这样做，如果不仅仅是因为供应商未能支持新的浏览器。
@Jason 不能再同意了 - 拧 IE6 和拧 microsoft 坦率地说，因为他们推出了如此垃圾的不符合 W3C 的浏览器来折磨我们！如果所有网站都不支持，公司就会适应。

【解决方案2】：

您可能想查看 Remy Sharp 的 recent article on fixed floating elements at jQuery for Designers，它有一个很好的视频和关于如何在客户端脚本中应用此效果的文章

【讨论】：

【解决方案3】：

只是为了更生动可爱的解决方案：

$(window).scroll(function(){
  $("#div").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
});

还有一支笔给想看的人：http://codepen.io/think123/full/mAxlb，叉子：http://codepen.io/think123/pen/mAxlb

更新：和非动画 jQuery 解决方案：

$(window).scroll(function(){
  $("#div").css({"margin-top": ($(window).scrollTop()) + "px", "margin-left":($(window).scrollLeft()) + "px"});
});

【讨论】：

非常好。我正在使用 JQueryUI.resizable，它不适用于固定元素，所以这是一个很好的选择，谢谢。
@QF_Developer 完全不用担心。
@lk.annamalai 别担心。
@think123 使用 jquery 但没有动画的任何解决方法。

【解决方案4】：

只需在您的 div 样式中添加 position: fixed;。

我已经检查过了，它在我的代码中运行良好。

【讨论】：

position: fixed 当您希望您的 div 仅与其中一个卷轴 X 或 Y 一起移动时是不够的。接受的答案是完美的。如果您只需要水平滚动，只需删除 marginTop。如果您只需要垂直，请删除 marginLeft。

【解决方案5】：

当您的页面顶部没有标题或徽标时，单独使用 position:fixed 就可以了。此解决方案将考虑窗口滚动的距离，并在您滚动通过标题时移动 div。然后，当您再次到达顶部时，它会将其锁定回原位。

if($(window).scrollTop() > Height_of_Header){
    //begin to scroll
    $("#div").css("position","fixed");
    $("#div").css("top",0);
}
else{
    //lock it back into place
    $("#div").css("position","relative");
}

【讨论】：

【解决方案6】：

这是 Jquery 代码

$(document).ready(function () {
     var el = $('#Container');
        var originalelpos = el.offset().top; // take it where it originally is on the page

        //run on scroll
        $(window).scroll(function () {
            var el = $('#Container'); // important! (local)
            var elpos = el.offset().top; // take current situation
            var windowpos = $(window).scrollTop();
            var finaldestination = windowpos + originalelpos;
            el.stop().animate({ 'top': finaldestination }, 1000);
        });
    });

【讨论】：