StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I just completed a plugin that will do this as well. I had problems attempting to change the element's position from fixed to absolute and back again whenever it hit the top or bottom of the viewport. It didn't work for me under different screen resolutions since I had a need to set the left property. Basically just reference the plugin and call this on the element you want to scroll:</p> <p>$myDiv.fixposition({boundingElement:myBoundary}) //myBoundary is the element you want your scrolling div to remain within.</p> <pre> <code> /** * Enables an element to be fixed in position within a specified bounding element. * Usage: $("#myElementToBeFixed").fixposition(); * Provide a data structure with the following elements if you want to override the defaults: * boundingElement - the element to limit the fixed position within * bottomOffset - the amount to bufferhe fixed element from the bottom (of the specified bounding element) */ (function($) { $.extend($.fn, { fixposition: function(opts) { return this.each(function() { var defaults = { boundingElement: "", bottomOffset: 20 }; var options = defaults; if (typeof(options) != 'object') options = { }; options = $.extend(options, opts); $this = $(this); var $boundEl = $("#" + options.boundingElement); var bottomBound = $boundEl.offset().top + $boundEl.height(); var maxTop = bottomBound - $this.height() - options.bottomOffset; var minTop = $this.offset().top; var newTopPos = null; var parentTopOffset = $this.parent().offset().top; if($("body").length > 0 && options.boundingElement != "") { $(window).scroll(function () { var scrollY = $(window).scrollTop(); if($this.length > 0) { if ($this.offset().top != (scrollY - parentTopOffset)) { newTopPos = scrollY - parentTopOffset; } if (newTopPos != null) { if (newTopPos > maxTop - parentTopOffset) { newTopPos = maxTop - parentTopOffset - options.bottomOffset; } else if (newTopPos < minTop - parentTopOffset) { newTopPos = minTop - parentTopOffset; } $this .stop() .css({"top": newTopPos}); } } }); } }); } }); })(jQuery); </code> </pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload