jQuery-滚动边栏 [英] jQuery - Scroll sidebar

问题描述

我正在尝试创建一个随页面滚动的侧边栏.但是我希望它在用户滚动到侧栏的顶部边框后开始滚动.

I'm trying to create a sidebar that scrolls with the page. But I want it to start scrolling after user has scrolled to the top border of the sidebar.

(facebook在首页上的实现方式以及随用户添加滚动条的方式)和本网站上(如果您滚动到页面底部，那么其中之一总是跟随您)

(The way facebook does it on the front page and the adds scroll with user) and on this site (if you scroll to bottom of the page, one of the adds is always following you)

，我想知道我将如何实现它.

and I'm wondering how would I achieve it.

我尝试了以下代码段，但这会立即开始滚动，并且无法使用液体布局，因为我希望边栏保持在同一位置并且仅向下滚动.

I've tried the following snippet, but this begins the scroll instantly and is not going to work with liquid layout, as I want the sidebar to stay in the same place and only scroll down.

$(window).scroll(function () { 
    $("#sidebar").css("position", "fixed").css("top", "50px").css("right", "50px");         
});​

和相关的小提琴.

推荐答案

定义minHeight

minHeight = YOUR-FAVORITE-HEIGHT-IN-PIXEL-WITHOUT' px';

在scroll事件中，请检查以下内容后做所有您想做的事情:

In scroll event, do all you want after checking this:

if($(window).scrollTop() > minHeight) {
   // change sidebar style, blah blah blah...
}esle{
   // roll back sidebar style, blah blah blah...
}

将minHeight设置为$('#sidebar').offset().top;

这篇关于jQuery-滚动边栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！