2013-10-28 49 views
1

现在我知道如果用户滚过旁边栏的底部,那么边栏会变为固定并停留在用户页面上,而他们读取主要内容的其余部分。停止某个位置的固定格

但现在我的固定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); 
    } 
}); 

});

+0

我想你只是有一个样式问题,尝试位置:固定; right:0; z-index:4; top:0; –

+0

@anulik这只是打破了它的方式更多..哈哈..它的JavaScript必须改变类,当用户滚动x页面数量下降 –

回答

0

在您的.stick类定义中将bottom更改为top,以使侧栏粘在顶部而不是底部。

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

这没有做任何事情...... –

+0

改变'底部'到'顶部'在滚动时(而不是底部),您的粘性侧栏会粘到浏览器的顶部。也许你可以详细说明你的请求,如果这不解决它。 http://jsfiddle.net/7Nzh6/ – user2669157

+0

它看起来一样...大声笑 –