当我滚动页面时，如何使<div>上下移动？

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

Answer 1

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

position: fixed; 

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

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

Answer 2

只是为了更多的animation和可爱的解决scheme：

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

而对于那些想查看的笔： http : //codepen.io/think123/full/mAxlb和fork： http : //codepen.io/think123/pen/mAxlb

更新：和一个非animation的jQuery解决scheme：

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

Answer 3

使用position:fixed当页面顶部没有标题或徽标时，单独position:fixed就可以了。 这个解决scheme将考虑到窗口滚动的距离，当你滚动你的标题时移动div。 当你再次到达顶部时，它将locking到位。

 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"); } 

Answer 4

这是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); }); }); 

Answer 5

只需添加position: fixed; 在你的div风格。

我已经检查，并在我的代码工作正常。

Answer 6

您可能想查看一下Remy Sharp 最近关于jQuery for Designers的固定浮动元素的文章 ，它有一个很好的video和关于如何在客户端脚本中应用这个效果的文章