How to hold a fixed div of height more than viewport to body

Question

I know about the location of the div (fixed, absolute, and relative). I can attach a fixed div to the body so that it adheres to the same position while scrolling through the body. Here I ask a slightly different question.

I have a sidebar with a height greater than the height of the viewport, and I want it to be attached to the body. When scrolling through the body, it should also scroll, but as soon as the bottom of the fixed div is visible, it should not scroll with the body.

For example, the right sidebar of a Facebook wall scrolls with the body and stops scrolling with the body when the bottom of the right sidebar is visible (fixed).

Answer 1

This is possible if you set the absolute sidebar and change it to fixed as soon as the scroll position of the windows goes below.

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

And a demo .

Answer 2

Here you have three tutorials for the intended task (the first results from Google with the query: “fixed sidebar on scroll”)

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/

Here is the code for one of the approaches:

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

Using the Facebook sidebar as an example, it seems that as soon as the browser scrolls vertically to a certain threshold (the top of the screen hits the top of the final announcement in the sidebar), it changes the class in the sidebar.

At this point, it sets a fixed css position and sets the top style on the sidebar - ??? px, so that it is displayed on this threshold, does not move, but when scrolling down it will no longer scroll.

You can determine the offset of a specific element using the jquery scrollTop () function. http://api.jquery.com/scrollTop/

Answer 4

With an absolute position (in a fixed position, we need to hide the scroll and set scrollTop instead of the top):

 $(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; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="content"></div> <div id="sidebar"></div> 

fiddle

Answer 5

This can be done by checking scrollTop () against the heights of the containers.

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="wrapper"> <div id="main"> <p>Main Content</p> </div> <div id="sidebar"> <p>Sidebar</p> </div> <div id="more"> <p>More Content</p> </div> </div>