在一个点停止固定div的位置

时间:2013-10-28 18:47:47

标签: javascript jquery html css

现在我知道,如果用户滚动到侧栏的底部,那么侧边栏会变为固定并保留在用户页面上,同时他们会阅读剩余的主要内容。

但是现在我的固定div正在进入页脚。那么,我怎样才能阻止它从父div中掉出来并进入页脚?

这里有一个小问题:http://jsfiddle.net/95W8w/

所有的代码都在jsFiddle中,但是因为我需要把代码放在这里,如果我有一个jsFiddle包含。

JavaScript的:

  $(document).ready(function() {
 // Cache selectors for faster performance.
 var $window = $(window),
     $sidebar = $('#anchor'),
     $sidebarAnchor = $('#right');

 // Run this on scroll events.
 $window.scroll(function() {
var window_top = $window.scrollTop();
var div_top = $sidebarAnchor.offset().top;
if (window_top > div_top) {
 // Make the div sticky.
 $sidebar.addClass('stick');
 $sidebarAnchor.height($sidebar.height());
}
else {
    // Unstick the div.
    $sidebar.removeClass('stick');
    $sidebarAnchor.height(0);
  }
 });

});

1 个答案:

答案 0 :(得分:0)

bottom类定义中的top更改为.stick,使侧边栏保持在顶部而不是底部。

.stick {position: fixed; top:0px;}