Исчезновение <div>исчезает за заголовком видео

Question

У меня есть заголовок видео на моем сайте с кнопкой прокрутки вниз, которая постепенно уменьшает его непрозрачность от 1 до 0 по мере приближения к связанной с ним точке привязки. Само затухание js работает нормально, но что-то ему мешает. У него есть проблема, когда он исчезает, когда он перемещается по заголовку видео, вот сценарий:

$(document).scroll(function (e) {
    // offsetTop will be computed based on the closest relatively positioned parent element
    // since your anchor has none, his will return distance to document top
    let destination_y = $("#anchor")[0].offsetTop;
    let scrollbar_y = (window.scrollY); // top of scrollbar y position

    // subtract 1 to generate the css opacity level based on ratio
    let opacity = 1 - (scrollbar_y / destination_y); 
    $(".godown").css("opacity", opacity);
});

Вот codepen .

Как вы можете видеть немедленно исчезает, когда он перемещается по заголовку видео, вместо того, чтобы медленно плавно переходить в 0, как должно.

Answer 1

Все, что вам нужно сделать, это немного изменить код CSS.

Добавьте следующее:

#scroller {
    position: fixed;
    z-index: 999;
}

Вот codepen .

Это должно решить проблему!

Answer 2

У вашего видео более высокий z-index, поэтому оно находится над #scroller. Просто задайте элементу #scroller позицию non-stati c (z-index не работает с элементами static) & и более высокое z-index, чтобы он находился поверх video element.

Из docs :

Свойство z-index CSS устанавливает z-порядок позиционированного элемента и его потомков или гибкости Предметы. Перекрывающиеся элементы с большим z-индексом перекрывают элементы с меньшим.

Answer 3

Удалите свойство z-index из <video> внутри <header> в вашем CSS

Вы можете использовать метод анимации и установить скорость на «медленную», чтобы улучшить ее.