Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

added better support for overflow with multiple sticky headers and divs

  • Loading branch information...
commit 56da5c0c931ac04493c2463cb3630303da0d3680 1 parent f359a67
@lecar-red authored
Showing with 96 additions and 13 deletions.
  1. +3 −0  README
  2. +76 −10 js/jquery.stickyfloat.js
  3. +17 −3 overflow.html
View
3  README
@@ -10,6 +10,9 @@
* All in one vertical floating solution
+ Also supports sticky header inside divs with overflow of scroll or auto
+ when content exceeds size.
+
Parameters:
-----------
View
86 js/jquery.stickyfloat.js
@@ -21,12 +21,10 @@
*/
( function($) {
$.fn.stickyfloat = function(options) {
- return this.each( function() {
- var p = $(this).parent();
-
+ return this.each( function() {
// we check each parent for overflow to find valid option to use
// for positioning, need better name than base
- var base = p.parents().map( function() {
+ var base = $(this).parents().map( function() {
if ( $(this).css('overflow') == 'scroll' ||
$(this).css('overflow') == 'auto' ) {
return this;
@@ -88,26 +86,94 @@
}; // end calc
// position when float is inside of overflow with scroll
+ // p - overflow element (not parent) need to change
function _position_overflow($obj, options, p) {
// var par = $obj.parent();
// not sure about this yet, if we are inside div > div > div
var parentPaddingTop = parseInt( $obj.parent().css('padding-top') );
- var startOffset = $obj.parent().offset().top;
- var opts = $.extend({
+
+ // offset is relative to document not current element
+ //var startOffset = p.offset().top - $obj.parent().offset().top;
+ var startOffset = $obj.parent().offset().top - p.offset().top;
+
+ // set defaults and overrides
+ var opts = $.extend({
startOffset: startOffset,
offsetY: parentPaddingTop,
duration: 400,
- lockBottom: true
+ lockBottom: true
}, options);
$obj.css({ position: 'relative' });
+ if(opts.lockBottom) {
+ // get the maximum scrollTop value but using scrollHeight
+ // (for overflow elements)
+ var bottomPos =
+ $obj.parent().prop('scrollHeight') - $obj.height() + opts.offsetY;
+
+ _emit_log("bottomPos [" + $obj.attr('id') + "]: " + bottomPos );
+
+ if( bottomPos < 0 )
+ bottomPos = 0;
+ }
+
+ // scroll attached to overflow element
$(p).scroll(function() {
- var newpos = $(this).scrollTop() + opts.offsetY;
+ var msg = "[" + $obj.attr('id') + "]: ";
+
+ // ** These don't appear to be needed inside scrolling overflow **
+ // check if the overflow element was scrolled down more
+ // than the start offset declared.
+ var pastStartOffset = $(this).scrollTop() > opts.startOffset;
+
+ // check if the object is at it's top position (starting point)
+ var objFartherThanTopPos = $obj.offset().top > opts.startOffset;
+
+ // scrollTop isn't completely correct here
+ // newpos will be need to take into account
+ var newpos = $(this).scrollTop() - opts.startOffset + opts.offsetY;
+
+ _emit_log(
+ msg +
+ "scrollTop: " + $(this).scrollTop() + " " +
+ "startOffset: " + opts.startOffset + " " +
+ "offsetY: " + opts.offsetY + " " +
+ "newpos: " + newpos + " " +
+ "bottomPos: " + bottomPos + " "
+ );
+
+ // stop scroll at bottom of parent
+ if ( newpos > bottomPos )
+ newpos = bottomPos;
+
+ if ( $(this).scrollTop() < opts.startOffset )
+ newpos = opts.offsetY;
+
+ $obj.stop();
+
+ if ( newpos < 0 )
+ newpos = 0;
+
+ // nothing to do here
+ //if ( !pastStartOffset && !objFartherThanTopPos )
+ // return;
+
+ // move until obj is outside of parent size, then stop
+ _emit_log(
+ msg +
+ "scrollTop: " + $(this).scrollTop() + " " +
+ "header + div size: " + ( $obj.parent().height() - $obj.height() ) + " " +
+ "newpos: " + newpos
+ );
- $obj.stop();
$obj.animate({ top: newpos }, opts.duration );
});
- }
+ };
+
+ function _emit_log(msg) {
+ if ( console.log && window.debug )
+ console.log(msg);
+ };
};
})(jQuery);
View
20 overflow.html
@@ -22,6 +22,8 @@
}
.clear { both: clear; }
+
+ .inside { border: 1px dashed black; }
</style>
<script type="text/javascript">
$(function() { $('.header').stickyfloat({}) } );
@@ -33,7 +35,7 @@
<p>overflow:scroll</p>
<div class="scroll">
- <div class="header">This is a header</div>
+ <div class="header" id="nowrapper">This is a header</div>
<br class="clear">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo, massa feugiat tincidunt tincidunt, ligula dolor blandit purus, at aliquet mauris purus eget dui. Fusce ornare odio vitae quam consequat vel adipiscing leo fringilla. Donec nibh elit, adipiscing non ultricies nec, interdum sit amet justo. Donec pulvinar arcu eget mauris imperdiet non elementum lorem sagittis. Aliquam risus elit, egestas vel tristique sit amet, vestibulum in metus. Aliquam cursus, tellus a suscipit pulvinar, justo ipsum bibendum leo, id rutrum libero turpis quis lorem. Aenean bibendum lectus eget orci aliquam eu consequat orci dictum. Praesent nec sapien felis, consequat eleifend nisl. Morbi ac turpis dui, a mollis lorem.
@@ -54,7 +56,7 @@
<div class="scroll">
<div class="inside">
- <div class="header">
+ <div class="header" id="upper">
Header to be sticky
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo, massa feugiat tincidunt tincidunt, ligula dolor blandit purus, at aliquet mauris purus eget dui. Fusce ornare odio vitae quam consequat vel adipiscing leo fringilla. Donec nibh elit, adipiscing non ultricies nec, interdum sit amet justo. Donec pulvinar arcu eget mauris imperdiet non elementum lorem sagittis. Aliquam risus elit, egestas vel tristique sit amet, vestibulum in metus. Aliquam cursus, tellus a suscipit pulvinar, justo ipsum bibendum leo, id rutrum libero turpis quis lorem. Aenean bibendum lectus eget orci aliquam eu consequat orci dictum. Praesent nec sapien felis, consequat eleifend nisl. Morbi ac turpis dui, a mollis lorem.
@@ -66,7 +68,19 @@
Ut velit sapien, placerat pellentesque dapibus vel, ultricies ac nibh. Praesent a diam et sapien condimentum imperdiet. Cras quis pulvinar purus. Vestibulum id nibh elit, et ullamcorper velit. Quisque interdum lacus nulla, eget faucibus leo. Morbi rutrum dictum turpis, vitae commodo massa facilisis ut. Vestibulum non mattis purus. Duis dapibus lobortis eros accumsan vulputate. Nunc nisl augue, lobortis id vulputate in, blandit id lorem. Cras a ligula odio, eu porttitor velit. Proin fringilla consequat libero vel porta. Nam lorem orci, hendrerit et cursus in, rhoncus tincidunt mauris. Nunc rhoncus pellentesque scelerisque. Fusce hendrerit hendrerit ligula. Quisque ut sem augue, nec tempor leo.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla quis mauris erat. Fusce quis faucibus nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam id risus enim. Nulla feugiat, erat ut egestas tempus, ante odio condimentum nulla, non cursus eros erat quis velit. In vestibulum rutrum orci a blandit. Mauris accumsan magna vitae quam vehicula nec condimentum nulla semper. Morbi tristique est sed nunc accumsan posuere. Fusce pulvinar diam eget sapien vulputate feugiat. Mauris nisl tellus, gravida non elementum non, iaculis sit amet ligula. Suspendisse eget est in arcu volutpat auctor. Curabitur posuere viverra elit, in tincidunt erat commodo nec. Nam scelerisque neque vitae sapien tristique tincidunt fringilla libero ornare.
- </div>
+ </div><!-- inside -->
+
+ <div class="inside">
+ <div class="header" id="lower">Lower Header</div>
+ <br class="clear">
+Sed in leo vitae felis consequat rutrum. Mauris dolor lacus, pharetra nec cursus eget, vehicula sed arcu. Integer non tellus ac orci placerat gravida sit amet ac lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam consequat semper vehicula. Nam placerat, turpis sit amet lobortis vehicula, sapien libero cursus dui, dictum aliquet massa nisl vitae nisl. Nulla facilisi. Ut vel malesuada odio. Vestibulum metus massa, convallis tincidunt sollicitudin eu, ornare at nulla. Curabitur orci tellus, egestas ac vulputate vel, semper non dui. Sed nec eros quam. Suspendisse sed auctor lorem.
+
+ Suspendisse feugiat vehicula augue, sit amet aliquam purus volutpat eget. Sed sagittis lacinia mollis. Maecenas a leo nisl, in faucibus lectus. Pellentesque eget ipsum a justo convallis placerat in sit amet enim. Suspendisse tincidunt, tortor sed lacinia semper, magna justo molestie arcu, sed lacinia sem sem vel mi. Maecenas dictum, massa euismod dignissim tincidunt, eros ipsum pretium libero, nec dapibus sem augue et metus. Integer vel egestas est. Curabitur blandit quam at diam sollicitudin fringilla. Pellentesque vulputate egestas ante sit amet lobortis. Nunc aliquet imperdiet justo at mollis. Etiam ut tortor vel elit scelerisque congue aliquam sit amet metus. Aenean mauris lorem, eleifend non faucibus id, interdum sollicitudin sapien. Nam non mauris sed diam ullamcorper aliquam. Praesent euismod vehicula ultricies. Quisque dignissim ultricies mauris, convallis rutrum risus accumsan vel.
+
+ Ut velit sapien, placerat pellentesque dapibus vel, ultricies ac nibh. Praesent a diam et sapien condimentum imperdiet. Cras quis pulvinar purus. Vestibulum id nibh elit, et ullamcorper velit. Quisque interdum lacus nulla, eget faucibus leo. Morbi rutrum dictum turpis, vitae commodo massa facilisis ut. Vestibulum non mattis purus. Duis dapibus lobortis eros accumsan vulputate. Nunc nisl augue, lobortis id vulputate in, blandit id lorem. Cras a ligula odio, eu porttitor velit. Proin fringilla consequat libero vel porta. Nam lorem orci, hendrerit et cursus in, rhoncus tincidunt mauris. Nunc rhoncus pellentesque scelerisque. Fusce hendrerit hendrerit ligula. Quisque ut sem augue, nec tempor leo.
+
+ Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla quis mauris erat. Fusce quis faucibus nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam id risus enim. Nulla feugiat, erat ut egestas tempus, ante odio condimentum nulla, non cursus eros erat quis velit. In vestibulum rutrum orci a blandit. Mauris accumsan magna vitae quam vehicula nec condimentum nulla semper. Morbi tristique est sed nunc accumsan posuere. Fusce pulvinar diam eget sapien vulputate feugiat. Mauris nisl tellus, gravida non elementum non, iaculis sit amet ligula. Suspendisse eget est in arcu volutpat auctor. Curabitur posuere viverra elit, in tincidunt erat commodo nec. Nam scelerisque neque vitae sapien tristique tincidunt fringilla libero ornare.
+ </div><!-- inside -->
</div>
</body>
Please sign in to comment.
Something went wrong with that request. Please try again.