Липкий элемент внутри div с абсолютным положением на прокрутке

У меня есть 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

Спасибо.

Ответ 1

Вот как я это сделаю. Это не фиксирует его, но имеет тот же вид. Если scrollTop равен или больше, чем где верхняя часть фиксированного содержимого "должна быть", мы устанавливаем верхнюю точку абсолютно равной вершине 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'
      });
    }
  });
});

(Демо)

Ответ 2

Установите внешний div в

position: relative;

Установите внутренний div на

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

Это поместит верхний правый угол внутреннего div в указанное место в родительском контейнере. При установке абсолютного положения изображение, по моему мнению, устанавливается относительно первого родительского контейнера с позицией, определенной для чего угодно, кроме значения по умолчанию. Если элемент DOM не присвоен, абсолютный элемент будет располагаться относительно окна просмотра.

Ответ 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 - отключить все события мыши, включая выбор текста.

Имеется код:

$(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

Ответ 4

Вы можете попробовать следующий пример:

Во-первых, вместо добавления CSS в качестве встроенных стилей создайте класс css, который вы можете добавить и удалить из элемента .scroll.

CSS

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

Оберните свой .scroll элемент другим 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/

Надеюсь, что это поможет!