CSS выцветший раздел в верхней части прокрутки div

Я хочу добавить выцветший раздел в начало моего DIV, чтобы, когда пользователь прокручивается, контент постепенно исчезает. Я установил некоторый CSS, который достигает этого, но имеет одну проблему. Выцветший раздел прокручивается с содержимым, а не остается фиксированным.

Как я могу это исправить? Нужна ли мне помощь от jQuery или это возможно с помощью CSS и будет ли это работать во всех браузерах, совместимых с CSS3? (Я знаю, что у меня еще нет правильных префиксов поставщиков на моем linear-gradient)

Вот мой код и fiddle:

.fadedScroller {
  overflow: auto;
  position: relative;
  height: 100px;
}

.fadedScroller:after {
  content: '';
  top: 0;
  left: 0;
  height: 20px;
  right: 0;
  background: linear-gradient(to bottom, rgba(251,251,251,1) 0%,rgba(251,251,251,0) 100%);
  position: absolute;
}

Обновление

Я обновил свою скрипту, чтобы указать, что использование position: fixed действительно не работает, поскольку выцветший раздел появляется над содержимым div, не прикрепленным к вершине.

Ответы

Ответ 1

Создание второго div, чтобы удерживать градиент и перемещать его по содержимому div. Я знаю, что это грязный и не очень интуитивный способ писать, но он работает.

HTML:

<div class="fadedScroller">
   ...
</div>
<div class="fadedScroller_fade"></div>

CSS

.fadedScroller {
    overflow: auto;
    position: relative;
    height: 100px;
}

.fadedScroller_fade {
    content:'';
    margin-top: -100px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(251, 251, 251, 1) 0%, rgba(251, 251, 251, 0) 100%);
    position: relative;
}

Демо:

http://fiddle.jshell.net/hP3wu/12/

Ответ 3

Это обходное решение огромная, поэтому извиняюсь, но это единственный способ, о котором я мог думать: http://fiddle.jshell.net/hP3wu/17/

Итак, сначала я сделал еще один div с class="after", потому что я не могу выбрать псевдоэлемент :after с помощью JQuery

Затем я сделал репозицию div.after каждый раз, когда прокрутка происходит в .fadedScrollbar div с

$(".fadedScroller").scroll(function () {
    $(".fadedScroller .after").css("top", $(this).scrollTop());
});

Ответ 4

http://fiddle.jshell.net/ne1baj4e/1/ Это моя модификация решения yckart, которая уменьшает выцветание, когда div прокручивается вверх. Он просто добавляет этот бит Javascript/JQuery:

const FADE_HEIGHT = 40;
let oldStyle = $(`<style>.fadedScroller:after {top: -${FADE_HEIGHT}px;}</style>`).appendTo("head");

$(".fadedScroller").scroll(() => {
  let offset = Math.min($(".fadedScroller").scrollTop() - FADE_HEIGHT, 0);

  oldStyle.remove();

  oldStyle = $(`<style>.fadedScroller:after {top: ${offset}px;}</style>`).appendTo("head");
});

Затухание в нижней части div похоже, за исключением того, что вам нужно вычислить смещение как

$(".fadedScroller")[0].scrollHeight - $(".fadedScroller")[0].clientHeight - $(".fadedScroller")[0].scrollTop