如何将高度固定的div高于视口到身体

我知道div的定位（固定，绝对和相对）。 我可以将固定的div附加到身体上，以便在滚动身体时它会粘到相同的位置。 我在这里问一个不同的问题。

我有一个高度超过视口高度的侧边栏，我希望它固定在身体上。 滚动身体时，它也应该滚动但是一旦固定div的底部可见，它就不应该与身体一起滚动。

例如，Facebook墙的右侧边栏与主体一起滚动，一旦右侧边栏的底部可见（固定），就会停止与主体一起滚动。

Answer 1

这可以通过将侧边栏置于绝对位置并在窗口滚动位置通过底部时将其更改为固定。

CSS：

#sidebar { height: 120%; width: 100px; border: 2px solid blue; padding: 20px; margin: 20px; position: absolute; top: 0; } 

jQuery：

 $(document).ready(function() { var bottomPos = $('#sidebar').outerHeight(true) - $(window).height(); $(window).scroll( function() { if ( $(window).scrollTop() > bottomPos ) { $('#sidebar').css({'position':'fixed','top':'auto','bottom':'0px'}); } else { $('#sidebar').css({'position':'absolute','top':'0px'}); } }); }); 

还有一个演示 。

Answer 2

在这里，你有三个预定任务的教程（谷歌查询的第一个结果：“滚动固定边栏”）

http://www.waypointarts.com/blog/2013/06/29/fixing-a-side-bar-while-scrolling-until-bottom

http://andrewhenderson.me/tutorial/jquery-sticky-sidebar/

http://css-tricks.com/scrollfollow-sidebar/

以下是其中一种方法的代码：

CSS

 #page-wrap { width: 600px; margin: 15px auto; position: relative; } #sidebar { width: 190px; position: fixed; margin-left: 410px; } 

jQuery的

 $(function() { var $sidebar = $("#sidebar"), $window = $(window), offset = $sidebar.offset(), topPadding = 15; $window.scroll(function() { if ($window.scrollTop() > offset.top) { $sidebar.stop().animate({ marginTop: $window.scrollTop() - offset.top + topPadding }); } else { $sidebar.stop().animate({ marginTop: 0 }); } }); }); 

Answer 3

以侧边栏为例，似乎只要浏览器垂直滚动到某个阈值（屏幕顶部点击侧边栏中最终广告的顶部），它就会改变侧边栏上的类。

此时它将css位置设置为fixed并在侧边栏上设置一个顶部样式 – ??? px，使其在该阈值处显示未移动但是当您向下滚动时它将不再滚动。

您可以使用jquery scrollTop（）函数检测特定元素的偏移量。 http://api.jquery.com/scrollTop/

Answer 4

使用绝对位置（在固定位置，我们必须隐藏滚动并设置scrollTop而不是顶部）：

 $(document).scroll( function() { var offset = $(this).scrollTop() + $(window).height() - $('#sidebar').outerHeight(); $('#sidebar').css('top', Math.max(0, offset)); }); 

 * { margin: 0; padding: 0; } #content { height: 2000px; padding-right: 40%; background: red; } #sidebar { height: 1000px; position: absolute; width: 40%; top: 0; right: 0; background: orange; } 

Answer 5

可以通过针对容器的高度测试scrollTop（）来完成。

 var $sidebar = $("#sidebar"), $window = $(window), offset = $sidebar.offset(), topPadding = 50, calc= 0, max = 0; $window.scroll(function() { calc = $window.scrollTop() + $sidebar.height() + offset.top; if(calc > $('#main').height()) { max = $('#main').height() - $sidebar.height(); $sidebar.stop().css('marginTop', max); } else if ($window.scrollTop() > offset.top) { $sidebar.stop().animate({ marginTop: $window.scrollTop() - offset.top }); } else { $sidebar.stop().animate({ marginTop: 0 }); } }); 

 #wrapper { width: 100%; } #main, #more { width:70%; background-color: black; color:white; height: 900px; float:left; } #more { background-color: red; } p { margin-top:50%; } #sidebar { width:30%; background-color: blue; color:white; height: 500px; float:left; } 

  
 
 
Main Content
 
 
 
Sidebar
 
 
 
More Content