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.

michelgotta · Answer 1 · 2013-04-18T07:41:53.430

30

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

edited Apr 18 '13 at 07:41

answered Mar 11 '11 at 13:39

michelgotta

976
8
11

This is a nice, slick way of doing it as well. +1 – Dutchie432 Mar 11 '11 at 13:50
It's not "bouncing" like Dutchies, but it does exactly what the box on the "Ask" site does. – michelgotta Mar 11 '11 at 13:58
This might actually be better than my approach if you don't need the 'sticky' or 'bouncing' effect. My approach can cause flickering under certain circumstances. see http://jsfiddle.net/Jaybles/C5yWu/4/ – Dutchie432 Mar 11 '11 at 16:15
Agreed. Dutchie's answer was really helpful, and very informative, but I ended up looking into this kind of approach, when trying to deal with the "bounciness" of re-positioning the div with every scroll increment. Thanks very much for this. – Laurent Stanevich Mar 11 '11 at 20:57
this is what i had in my mind, hoped that there was a css only solution but seems that there isnt.I believe that this dude's code is probably the best you can do. – GorillaApe Sep 21 '12 at 16:37

Dutchie432 · Accepted Answer · 2011-03-11T13:58:29.393

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/

WHOA! That's exactly what I was looking for -- and obviously really nicely presented. Thanks so much! — Laurent Stanevich, Mar 11 '11 at 15:48

Aylian Craspa · Answer 3 · 2012-12-31T11:17:34.463

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

score 0 · Answer 4 · answered Feb 12 '13 at 07:17

0

And if you only need to hold the div in a some place of the browser you don't need the javascript you can do that with CSS.

#chatt-box {
    right: 5px;
    height: auto;
    width: 300px;
    position: fixed;
    bottom: 0px;
}

answered Feb 12 '13 at 07:17

Aylian Craspa

422
5
11

Using jQuery to keep scrolling object within visible window

4 Answers4

Linked