Question

我有div position: absolute和overflow: auto。在div内，我有一个div应该是粘性的，当我滚动时应该修复（top: 0, bottom: 0, overflow: auto）。

我可以修复此div，但我无法将其恢复到原始位置，因为在修复此div时我无法附加滚动事件。

$('.right').scroll(function() {
    if ($('.scroll').offset().top <= 0) {
        $('.scroll').css({
            'position': 'fixed',
            'top': 0,
            'left': '20px',
            'right': '0',
            'overflow': 'auto'
        })
    }
})

请查看我的JSFiddle以获取更多信息 - JSFIDDLE

谢谢。

Answer 1

这是我怎么做的。这并没有固定，但外观相同。一旦scrollTop等于或大于固定内容的顶部＆＃34;应该是＆＃34;然后我们将topT绝对设置为scrollTop的顶部，如果你在scrollTop到达固定内容的位置时向上滚动，它将再次丢弃它。

$(document).ready(function() {
  oldOffset = $('.scroll').offset().top;
  $('.right').scroll(function() {
    if ($('.right').scrollTop() > oldOffset) {
      $('.scroll').css({
        'position': 'absolute',
        'top': $('.right').scrollTop(),
        'left': '20px',
        'right': '0',
        'overflow': 'auto'
      });
    }
  });
});

（Demo）

Answer 2

将外部div设置为

position: relative;

将内部div设置为

position: absolute;
top: 15px;
right: 15px;

这会将内部div的右上角放在父容器中的指定位置。设置绝对位置时，我相信图像是相对于第一个父容器设置的，其位置定义为默认值以外的任何值。如果没有为元素分配位置，则绝对元素将相对于视口定位。

Answer 3

你想要完成的任务非常奇怪：）

但无论如何都有问题：

当您将内部div设置为position: fixed时，您将此div定位在div.right之上，这样可以阻止滚动事件。

所以您需要将pointer-events: none设置为div.scroll以允许您的div.right听取滚动事件而不会出现任何问题。

但是当你这样做时，你将面临另一个问题 - 当你将div.scroll设置为position: fixed时，它会在div.right和div.right跳转到滚动顶部自动。为了防止您需要创建div.scroll的克隆并将其height初始设置为0，并在内部元素修复时设置为auto。

注意 pointer-events: none - 禁用所有鼠标事件，包括文本选择。

有代码：

<强> JS

$(document).ready(function() {
    var cnt = $('.right');
    var scrollEl = $('.scroll');
    var scrollClone = scrollEl.clone().addClass('clone');
    scrollEl.before(scrollClone);
    cnt.scroll(function() {
        var expression = scrollClone.offset().top <= 0;
        scrollEl.toggleClass('stick', expression);
        scrollClone.toggleClass('stick-clone', expression);
    })
})

<强> CSS

.scroll {
    background: yellow;
    pointer-events: none;
    overflow: hidden; /* Remove top offset from h1*/
}
.scroll.stick {
    position: fixed;
    left: 20px;
    right: 0;
    top: 0;
}
.scroll.clone {
    height: 0;
    overflow: hidden;
}
.scroll.clone.stick-clone {
    height: auto;
}

JSFiddle

Answer 4

您可以尝试以下示例：

首先，不要将css添加为内联样式，而是创建一个可以在.scroll元素中添加和删除的css类。

CSS

.fixed-top {
    position:fixed;
    top:0;
    left:20px;
    right:20px;
}

将.scroll元素换成另一个div，该div将在javascript中用于跟踪.scroll div的原始高度。

HTML

<div class="scroll-wrapper">
    <div class="scroll"></div>
</div>

最后，在第一次应用固定位置时，将scrollTop值存储在变量中。然后，您可以使用该值来确定何时从.scroll div中删除固定样式。同时将.scroll-wrapper元素的高度设置为等于.scroll元素的高度，以确保内容可滚动。

的Javascript

 var startScrollTop = 0;
    $('.right').scroll(function () {
        var $scroll = $('.scroll');
        if ($scroll.offset().top <= 0 && $('.right').scrollTop() > startScrollTop) {
            if (startScrollTop === 0) {
                startScrollTop = $('.right').scrollTop();
            }
             $('.scroll-wrapper').css("height", $('.scroll').height() + 300);
            $scroll.addClass("fixed-top");
        } else {
            $scroll.removeClass("fixed-top");
        }
    })

看看这个小提琴。 http://jsfiddle.net/a924dcge/25/

希望有所帮助！

div中的粘性元素，滚动上的绝对位置

4 个答案: