溢出 Div 中的偏移问题

发布于 11-28 06:00 字数 320 浏览 2 评论 0原文

当在具有固定高度和溢出的 div 内部使用 JQuery Offset 时,我遇到了问题。

在这个 div 中,我有两列,一个主栏和一个侧栏。我希望侧栏中的一个 div 在 div 内滚动,直到到达顶部,但随后我希望它保留在那里。

我在这里设置了一个演示: http://jsfiddle.net/zsJAr/53/

确实向上滚动,但它不会开始停留在顶部,直到滚动超过 div 的顶部,从而有效地切断了 div 的顶部。

任何帮助将不胜感激。

I'm having problems with JQuery Offset when used inside of a div that has a fixed height and overflow.

Inside this div I have two columns, a main and a sidebar. I want one of the divs in the side bar to scroll within the div until it reaches the top, but then I want it to stay there.

I have a demo set up here : http://jsfiddle.net/zsJAr/53/

The div does scroll up but it doesn't start to stay at the top until it's scrolled past the top of the div, effectively cutting off the top part of the div.

Any help would be greatly appreciated.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

a√萤火虫的光℡2024-12-05 06:00:34

您需要

所在位置的顶部偏移量:

http://jsfiddle。网/manianator/qaVnY/

$(document).ready(function() {

    // move the share this widget with the window
    if ($('#scrollingContent').length > 0) {
        var $widget = $("#scrollingContent");
        var $window = $("#overFlowDiv");
        var $topOffset = $('h1').height();
        var $offset = $widget.offset();
        var $initialMargin = $widget.css('marginTop');

        $window.scroll(function() {
            if ($window.scrollTop() > ($offset.top)) {
                $widget.stop().animate({
                    marginTop: ($window.scrollTop() - ($offset.top - $topOffset))
                });
            } else {
                $widget.stop().animate({
                    marginTop: $initialMargin
                });
            }
        });
    }
})

You needed the top offset where the <h1> is:

http://jsfiddle.net/maniator/qaVnY/

$(document).ready(function() {

    // move the share this widget with the window
    if ($('#scrollingContent').length > 0) {
        var $widget = $("#scrollingContent");
        var $window = $("#overFlowDiv");
        var $topOffset = $('h1').height();
        var $offset = $widget.offset();
        var $initialMargin = $widget.css('marginTop');

        $window.scroll(function() {
            if ($window.scrollTop() > ($offset.top)) {
                $widget.stop().animate({
                    marginTop: ($window.scrollTop() - ($offset.top - $topOffset))
                });
            } else {
                $widget.stop().animate({
                    marginTop: $initialMargin
                });
            }
        });
    }
})
開玄2024-12-05 06:00:34

有点不太传统,但这似乎对我有用......

$window.scroll(function() {
if ($window.scrollTop() > $offset.top) {
$widget.stop().animate({
  marginTop: ($window.scrollTop() -(180 - $offset.top))
});

A little less conventional, but this seemed to work for me...

$window.scroll(function() {
if ($window.scrollTop() > $offset.top) {
$widget.stop().animate({
  marginTop: ($window.scrollTop() -(180 - $offset.top))
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文