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/

希望有所幫助！