限制滚动到元素jQuery

Question

我的目标是让社交共享栏滚动页面从一个元素到另一个元素。你可以在这里看到我的进展http://ossian.statenews.com/~matt/statenews-redesign/docs/article.html。此时元素会一直滚动到底部，因为我想滚动到“相关故事”的顶部。这里是我的jQuery：........

$(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

你if语句只检查window scrollTop的，你应该检查.related-stories了。

if ($window.scrollTop() > offset.top && $window.scrollTop() < $('.related-storie').scrollTop()) { 
    $sidebar.stop().animate({ 
     marginTop: $window.scrollTop() - offset.top + topPadding 
    }); 
} 

Answer 2

这将是更好的用户体验，如果您使用的块的固定位置，像

$(document).ready(function() { 
    var $sidebar = $("#sharebox"), 
    $window = $(window), 
    offset  = $sidebar.offset(), 
    topPadding = 50, 
    $leadStory = $('.leadstory'); 
    $relatedStories = $('.related-stories'); 

    $sidebar.css({ 
     position : 'fixed', 
     'margin-left' : 0, 
     left : offset.left, 
     top : offset.top 
    }); 

    var criteria = $relatedStories.offset().top - $sidebar.height(); 
    $window.scroll(function() { 
     if ($window.scrollTop() > criteria) { 
      $sidebar.css({ 
       top : offset.top - ($window.scrollTop() - criteria) 
      }); 
     } else { 
      $sidebar.css({ 
       top : offset.top 
      }); 
     } 
    }); 
}); 

退房上述