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?