$.fn.sideFixed = function() { var $parent = $(this), $target = $parent.find("li:last-child"); var parent_height = $parent.height(); var target_height = $target.height(), target_width = $target.width(); var position = parent_height - target_height - 15; var ofTarget = ({ "position": "fixed", "top": "1em", "width": target_width }); $(document).on("scroll", function() { return ($(this).scrollTop() > position )? $target.css( ofTarget ) : $target.css( "position", "static" ) }); } $(".side").sideFixed();
<div class="side"> <ul> <li></li> <li></li> <li></li> </ul> </div> <div class="main"> <div class="content"></div> <div class="content"></div> <div class="content"></div> </div>
body { width: 30em; position: relative; font-size: 15px; } ul { list-style: none; padding: 0; margin: 0; } .side, .main { float: left; } .side { width: 30%; } li:nth-of-type(-n+2) { height: 5em; width: inherit; background-color: #A8A858; margin-bottom: 1em; } li:nth-of-type(3) { height: 15em; width: inherit; background-color: #99596B; } .main { width: 70%; background-color: #4A7C95; height: 90em; } .content { height: 30em; } .content:nth-of-type(2) { background-color: lighten(#4A7C95, 20%); }