限制滾動到元素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 
      }); 
     } 
    }); 
}); 

退房上述