CSS wyblakły przekrój na górze przewijania div

Question

Chcę dodać wyblakłą sekcję na górze mojego DIV, tak, że gdy użytkownik przewinie zawartość stopniowo zanika. Ustawiłem CSS, który to osiągnął, ale ma jeden problem. Wyblakły dział przewija zawartość, zamiast pozostać na miejscu.

Jak mogę to naprawić? Czy potrzebuję pomocy z jQuery, czy jest to możliwe przy użyciu CSS i czy będzie działać w dowolnych przeglądarkach zgodnych z CSS3? (Wiem, że nie mam poprawnych prefiksy dostawców na moich linear-gradient s jeszcze)

Oto mój kod tak daleko i 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; 
} 

Aktualizacja

I zostały zaktualizowane my fiddle podkreślić to, że przy użyciu position: fixed faktycznie nie działa jako wyblakły przekrój, pojawia się powyżej zawierającego div nie ustalony na górze.

Answer 1

Tworzenie drugi div trzymać nachylenie i przesunięcie go w ciągu prac zawartości div. Wiem, że jest to trochę brudne i mało intuicyjne w pisaniu, ale działa.

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; 
} 

Demo:

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

Answer 2

Całkiem proste, należy position:fixed zamiast position:absolute:

.fadedScroller:after { 
    content:''; 
    position: fixed; 
    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%); 
} 

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

Update1

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

Update2

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

Answer 3

To ogromny rozwiązanie obejście, więc przeprosiny, ale jest to jedyny sposób, jaki mogłem wymyślić: http://fiddle.jshell.net/hP3wu/17/

Więc najpierw zrobiłem kolejny div z class="after" bo nie mogę wybrać pseudo-element :after z JQuery

Potem zrobiłem repozycji sam div.after każdym razem zwój występuje w .fadedScrollbardiv z

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

Answer 4

http://fiddle.jshell.net/ne1baj4e/1/ To jest moja modyfikacja rozwiązania yckart's, które zmniejsza zanikanie, gdy div jest przewijany do góry.To po prostu dodaje to trochę 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"); 
}); 

Zanikanie na dole div jest podobny z wyjątkiem musisz obliczyć przesunięcie jako

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