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

Question

我有一个position: absolute 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等于或大于固定内容的顶部“应该”，那么我们将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'
      });
    }
  });
});

（ 演示 ）

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设置为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/

希望有所帮助！