views:

7

answers:

0

I have a column that is a full height div based on this layout: http://www.alistapart.com/articles/holygrail

The right column has a series of divs in it, most of which have view more/hide functionality that uses slideDown() and slideUp() code:

$('.barker-content').each(function(){
  $(this).find('div.teaser:gt(0)').hide();
  $(this).find('ul.teaser li:gt(4)').hide();
  $('.barker-more').toggle(
  function () {
   $('a', this).text('Hide [-]');
   $(this).parent().find('div.teaser:gt(0)').slideDown();
   $(this).parent().find('ul.teaser li:gt(4)').slideDown();
  },
  function () {
   $('a', this).text('View more [+]');
   $(this).parent().find('div.teaser:gt(0)').slideUp();
   $(this).parent().find('ul.teaser li:gt(4)').slideUp();
  }
 );
});

and my scrollFollow code: $( '#follow' ).scrollFollow({ container: 'right', });

where "right" is the name of the div that holds all of these teasers and barkers, and the #follow div.

the css for this element is:


#right {
 width: 320px;
 background: #d7d7d7;
 vertical-align:top;
 padding:5px 0;
 position:relative;
}

THE PROBLEM: it doesn't stick to the top of the viewport, even if I specify so in the code. The error offset seemingly depends on how many of the divs are "expanded", and then the #follow div will expand beyond its container.

Ideas?