具有滚动功能的浮动div

时间:2012-05-10 17:13:41

标签: jquery

我一直在寻找一个浮动的div /菜单,它不仅会像下面的例子一样浮动

http://dropthebit.com/demos/stickyfloat/stickyfloat.html

但是当浮动div /菜单高度超过视图端口时,允许您使用主滚动条查看菜单中位于视口上方或下方的部分。

但是一旦到达浮动div /菜单的末尾,它将锁定在顶部或底部,具体取决于您滚动的方向。

每个浮动div似乎总是锁定在顶部,如果你有一个不会增长的固定高度,这个效果很好。

要查看上面的浮动div示例是如何失败的,使用firebug或dev工具使div的高度大于视口,它将无法工作。或者只是调整窗口的大小,使其比浮动div的高度更短,当您向下滚动长页面时,您将看到它停止跟随您。

这是一个问题,因为我有一个动态选项菜单,可以扩展像istockphoto选项这样的合约,你可以在下面看到它。

http://www.istockphoto.com/search/text/boxer/source/

你可以看到它如何能够超越视口。我想让它浮动,但允许你向上或向下滚动,直到你到达菜单的上限或下限,然后根据你滚动的方向粘在顶部或底部。

我希望这是有道理的,我一直在研究一个浮动,它监视你滚动的滚动位置和方向,然后使用偏移高度和底部调整滚动元素的边缘高度,使外观浮动.. .blah

看起来似乎已经足够简单了。

有没有人知道一个插件,如果div高于视口高度,那么使用主窗口进行浮动div滚动?

1 个答案:

答案 0 :(得分:0)

由于您正在使用jQuery,如果您可以使用jQuery UI,它们支持对话框:http://jqueryui.com/demos/dialog/

然后你可以设置最小高度,最小宽度,允许盒子跨越内容的大小,或者你可以使用高度/宽度设置只允许一定的大小,然后溢出:自动到允许滚动条。