Using jQuery to keep scrolling object within visible window

Question

I was in the middle of writing up a long description of what I wanted to do, when I realized that the "How To Ask / Format" sidebar box on this very same "Ask A Question" page does exactly what I want.

Basically, it scrolls up and down in unison with the rest of the screen, staying top-aligned with the main section, unless the main section starts to scroll off the top of the visible window. At that point, the sidebar box stops scrolling, and starts to act as if its positioned absolutely, against the top of the visible window.

I've tried digging into source code and scripts on this "Ask" screen, but there's so much going on that it's pretty much impossible (for me, at least). I'm assuming that jQuery actually makes this kind of thing pretty straightforward, but I'm new to it, so I'm having a hard time figuring it out for myself. (And if this turns out to be a common question, my apologies -- I've been searching for about an hour, but there are so many closely-worded jQuery questions that I haven't been able to dig up an answer.)

Thanks in advance for any help.

Solution 1

Here is a little snippet I just whipped up to keep an object on screen while scrolling.

LIVE DEMO

http://jsfiddle.net/Jaybles/C5yWu/

HTML

<div id='object'>Top: 0px</div>

CSS

#object{height:200px; width:200px;background:#f00;position:absolute;top:0;left:0;}

jQuery

$(window).scroll(function(){
    var objectTop = $('#object').position().top;
    var objectHeight = $('#object').outerHeight();    
    var windowScrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();

    if  (windowScrollTop  > objectTop)
        $('#object').css('top', windowScrollTop );
    else if ((windowScrollTop+windowHeight) < (objectTop + objectHeight))
        $('#object').css('top', (windowScrollTop+windowHeight) - objectHeight);        

    $('#object').html('Top: ' + $('#object').position().top + 'px');

});

UPDATED EXAMPLE (With Timer + Animation)

http://jsfiddle.net/Jaybles/C5yWu/2/

Solution 2

This is an example for a shoppingcart Apple has on the Applestore Page.

The logic:

• check where the sticky element is
• check on the scroll event where the top window is
• add or remove CSS class to the sticky element

The jQuery:

$(document).ready(function() {  
 // check where the shoppingcart-div is  
 var offset = $('#shopping-cart').offset();  

 $(window).scroll(function () {  
   var scrollTop = $(window).scrollTop(); // check the visible top of the browser  

   if (offset.top<scrollTop) $('#shopping-cart').addClass('fixed');  
   else $('#shopping-cart').removeClass('fixed');  
  });  
});  

The CSS:

.fixed {  
        position: fixed;   
        top: 20px;  
        margin-left: 720px;  
        background-color: #0f0 ! important; }

example Link

Solution 3

if you need to keep it on bottom use as this jQuery

$(document).scroll(function() {
    var objectTop = $('#shopping-cart').position().top;
    var objectHeight = $('#shopping-cart').outerHeight();  
    var windowScrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();

   if((objectTop+objectHeight) <=  $('html').outerHeight())
       $('#'+cont).css('top', (windowScrollTop+windowHeight)- objectHeight);
   else
       $('#'+cont).css('top', $('html').outerHeight()- objectHeight);
});

Css

#shopping-cart{
    width: 100%;
    height: 50px;
    position: absolute;
    left: 0px;
    bottom: 0px;
}

if you need to keep it on top use as this jquery

$(document).scroll(function() {
    var objectHeight = $('#shopping-cart').outerHeight(); 
    var windowScrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();

    $('#shopping-cart').css('top', windowScrollTop );

});

Css

#shopping-cart{
    width: 100%;
    height: 50px;
    position: absolute;
    left: 0px;
    top: 0px;
}

it will do the magic and dont forget to keep your styles with the positions, and one thing its not work with internet explorer 8.0.7