如何在滚动时让div跟随?

I have a div on the left hand side which includes the business hours and weather. I would like that div to scroll down and up according to how the user scrolls. So it would follow and move up and down with the page. How would I attempt this? This is my website judystropicalgarden.com

我左手边有一个div，包括营业时间和天气。我希望div按照用户的滚动方式上下滚动。所以它会随着页面上下移动。我该如何尝试?这是我的网站judystropicalgarden.com

Thanks

谢谢

5 个解决方案

#1

You can either use the css property Fixed, or if you need something more fine-tuned then you need to use javascript and track the scrollTop property which defines where the user agent's scrollbar location is (0 being at the top ... and x being at the bottom)

您可以使用固定的css属性，或者如果您需要更精细的调整，那么您需要使用javascript并跟踪scrollTop属性，该属性定义了用户代理的scrollbar位置(0在顶部……)x在底部)

.Fixed
{
    position: fixed;
    top: 20px;
}

or with jQuery:

或与jQuery:

$('#ParentContainer').scroll(function() { 
    $('#FixedDiv').css('top', $(this).scrollTop());
});

#2

You can use the fixed CSS position property to accomplish this. There is a basic tutorial on this here.

您可以使用固定的CSS position属性来实现这一点。这里有一个基本的教程。

EDIT: However, this approach is NOT supported in IE versions < IE7, and only in IE7 if it is in standards mode. This is discussed in a little more detail here.

编辑:但是，这种方法在IE版本< IE7中不支持，只有在IE7中是标准模式时才支持。这里将更详细地讨论这个问题。

There is also a hack, explained here, that shows how to accomplish fixed positioning in IE6 without affecting absolute positioning. What version of IE are you targeting your website for?

这里还介绍了一个技巧，展示了如何在不影响绝对定位的情况下实现IE6中的固定定位。你的网站针对的是什么版本的IE ?

#3

Using styling from CSS, you can define how something is positioned. If you define the element as fixed, it will always remain in the same position on the screen at all times.

使用CSS中的样式，您可以定义内容的位置。如果将元素定义为fixed，它将始终保持在屏幕上的相同位置。

div
{
    position:fixed;
    top:20px;
}

#4

A better JQuery answer would be:

更好的JQuery答案是:

$('#ParentContainer').scroll(function() { 
    $('#FixedDiv').animate({top:$(this).scrollTop()});
});

You can also add a number after scrollTop i.e .scrollTop() + 5 to give it buff.

您还可以在scrollTop i之后添加一个数字。e . scrolltop() + 5使其变为浅黄色。

A good suggestion would also to limit the duration to 100 and go from default swing to linear easing.

一个很好的建议是将持续时间限制在100，从默认的摇摆到线性的放松。

$('#ParentContainer').scroll(function() { 
    $('#FixedDiv').animate({top:$(this).scrollTop()},100,"linear");
})

#5

the position:fixed; property should do the work, I used it on my Website and it worked fine. http://www.w3schools.com/css/css_positioning.asp

位置:固定;物业应该做的工作，我在我的网站上用过，它工作得很好。http://www.w3schools.com/css/css_positioning.asp

#1

.Fixed
{
    position: fixed;
    top: 20px;
}