To demonstrate the desired behavior, you can refer to this JSFiddle example:
http://jsfiddle.net/bN4qu/5/
Essentially, when the user scrolls down, the left column should stick when it reaches the bottom. The use of 'sticky-top' keeps the left column at the top, which is not the intended outcome here.
Conversely, when the user scrolls up, the left column should correctly stick to the top.
The provided JSFiddle uses CoffeeScript, but please note that our project does not incorporate this language. Additionally, we are utilizing a more recent version of JQuery.
<div id="header">HEADER</div>
<div id="content">
<div class="side" id="stick">
TOP OF LEFT COLUMN
<div class="bottom">
BOTTOM OF LEFT COLUMN
</div>
</div>
<div class="main">MAIN CONTENT</div>
</div>
<div id="footer">FOOTER</div>
body {
margin: 0;
padding: 10px;
}
#header {
height: 100px;
margin: 0 0 10px;
background: red;
}
#content {
position: relative;
float: left;
width: 100%;
height: auto;
margin: 0;
}
.side {
float: left;
width: 100px;
height: 900px;
margin: 0;
background: linear-gradient(red, yellow);
}
.bottom {
position: absolute;
bottom: 0;
}
.main {
height: 2500px;
margin: 0;
background: lightgray;
}
#footer {
clear: both;
height: 300px;
background: orange;
}
$.fn.stickyTopBottom = (options = {}) ->
# compatible with browsers supporting CSS3 transforms (e.g., IE9+)
## ##############
#initialization
options = $.extend
container: $('body') #reference element for starting and stopping the sticking
(doesn't have to contain the element)
top_offset: 0 #distance from viewport top to stick-top of element
bottom_offset: 0 #distance from viewport bottom to stick-bottom of element
, options
$el = $(this)
#Obtain the reference element's top. If the container moves, adjust this within the scroll handler.
#If there's Y translation in the container, this method may fail.
container_top = options.container.offset().top
element_top = $el.offset().top
viewport_height = $(window).height()
$(window).on 'resize', ->
viewport_height = $(window).height()
## #################
# Scroll handler
#
# Scrolling up or shorter element:
# if scrolled above element's top, position top of element to top of viewport
# (stick to top)
# Scrolling down:
# if scrolled past element's bottom, place bottom of element at viewport bottom
# (stick to bottom)
current_translate = 0
last_viewport_top = document.documentElement.scrollTop || document.body.scrollTop
$(window).scroll (event) ->
viewport_top = document.documentElement.scrollTop || document.body.scrollTop
viewport_bottom = viewport_top + viewport_height
effective_viewport_top = viewport_top + options.top_offset
effective_viewport_bottom = viewport_bottom - options.bottom_offset
...
... // Please refer to actual code for remaining content
...
$('#stick').stickyTopBottom
container: $('#content')