Prototype: keep an item in view when scrolling

Question

I want to keep the div element in the viewport when the page scrolls. I use this snippet using jquery:

  
         $ (function () {
             var offset = $ ("# column-menu"). offset ();
             var topPadding = 25;
             $ (window) .scroll (function () {
                 if ($ (window) .scrollTop ()> offset.top) {
                     $ ("# column-menu"). stop (). animate ({
                         marginTop: $ (window) .scrollTop () - offset.top + topPadding
                     });
                 } else {
                     $ ("# column-menu"). stop (). animate ({
                         marginTop: 25
                     });
                 };
             });
         });
    

It works fine, but it happens that the element disappears when scrolling, and then goes down from the top

- what I would like instead - The element stops as soon as its upper border reaches the top of the viewport, without animation, without sliding without nuts.

It must be ie6, ie7 and ie8 compatible ... Any suggestions (even with a prototype) would be great. Thanks.

Answer 1

I'm currently doing something very similar to keep a small heading of information at the top of large tables. Basically, when you scroll past X (in this case 180px), the div gets a fixed position at the top of the page. If you scroll back to X, then the div will return to its original position. No animations and no frills!

window.onscroll = function() { if( window.XMLHttpRequest ) { if (document.documentElement.scrollTop > 180 || self.pageYOffset > 180) { $('#StickyHeader').css('position','fixed'); $('#StickyHeader').css('top','0'); } else if (document.documentElement.scrollTop < 180 || self.pageYOffset < 180) { $('#StickyHeader').css('position','absolute'); $('#StickyHeader').css('top','0px'); } } } 

Answer 2

I just completed a plugin that will also do this. I had problems trying to change the position of an element from fixed to absolute and vice versa when it hit the top or bottom of the viewport. This did not work for me at different screen resolutions, since I needed to set the left property. Basically, just reference the plugin and call it on the element you want to scroll through:

$ myDiv.fixposition ({boundingElement: myBoundary}) // myBoundary is the element in which you want your scrollable div to stay inside.

 /** * 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);
/** * 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);