Question

I’m currently building a scrolling share bar for this dev website: http://ossian.statenews.com/~matt/statenews-redesign-1.1/docs/article.html

How do I make jQuery look for the “related-stories” div class and stop it from scrolling past?

Here’s what I have so far:

$(document).ready(function() {

var $sidebar   = $("#sharebox"),
$window    = $(window),
offset     = $sidebar.offset(),
topPadding = 50;

$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0 

});
}
});
});

Answer 1

So basically you just want the scrolling share bar to “stick” to the related stories once you scroll down that low. You are already half way there. the same way you don’t start the share bar from scrolling at the beginning is similar to how you will stop it at the end.

You just need to determine the case of when you want to freeze the scrolling share.

$(document).ready(function() {

  var $sidebar   = $("#sharebox"),
      $window    = $(window),
      offset     = $sidebar.offset(),
      topPadding = 50;

  $window.scroll(function() {
    if($window.scrollTop() > $('.related-stories').offset().top) {
      // basically this is just saying, that if you've scrolled passed the related
      // stories, we are going to force you back in line with them.
      // Edit: This needs to be first because the "else if" case is always true when
      //       this would be true so it never actually fails and calls this code.
      $sidebar.stop().css('marginTop', $('.related-stories').offset().top);
    } else if ($window.scrollTop() > offset.top) {
      $sidebar.stop().animate({
        marginTop: $window.scrollTop() - offset.top + topPadding
      });
    } else {
      $sidebar.stop().animate({
        marginTop: 0 
      });
    }
  });
});

This should solve the problem for you. The code might be a little off and you may need to play with it a bit. I’ll check again if you have any follow up questions but that won’t be until this evening. Good luck!