Как при скролле вне блока с position: fixed скрыть его?

Question

[Noname]

Уважаемые форумчане, такой вопрос. Необходимо, чтобы при скролле вне элемента с с position: fixed ему добавлялся класс для скрытия. Проблема такая что изначально он невидим, при клике на кнопку появляется, мне нужно чтобы при скролле везде вне этого блока (ибо в нем самом есть контент для прокрутки) больше чем на 100пикселей ему добавлялся класс. При скролле везде вне этого блока имеется ввиду, что учитывается и скролл на другом элементе с фиксированной позицией. Вот разметка https://jsfiddle.net/u9Lahybj/34/
Прошу помочь или направить на нужное направление. Еще хотелось бы без костылей по типу от вьюпорта отнять высоту этого блока когда он с классом active и в оставшемся участке ловить скролл. Хотя даже такой костыль ума нет сделать. Буду благодарна за сответы! :)

Answer 1

[Anton fon Faust]

А зачем такой огород?
При скролле, если проскроллился больше нужного, добавляете к body класс, например "extremal_scrolled", а дальше пишете стиль:

.extremal-scrolled .fixed-el2.active {
        transform: translateY(110%);
}

и вот ваш элемент благополучно уезжает при скролле больше чем нужно.
https://jsfiddle.net/ze4fq7ms/

Comments

[Noname]

подскажите, как мне узнать что пользователь проскроллил больше 100пикселей вне блока с красной рамкой? ведь именно в этом и заключается моя проблема

[Anton fon Faust]

Noname, точно так же, как вы это делаете в своем коде:
if ($(this).scrollTop() > чего вы там хотите)

[Noname]

Anton fon Faust, делала я так, не подходит.
мое условие было
if($(window).scrollTop() > 150){
$('.fixed-el2').removeClass('active');
}

проблема в том, что на мобильном, невозможно проскроллить то, что внутри блока .fixed-el2 и с при скроле внутри него на 150пикселей, как у меня в условии, он скрывается, а мне нужно, чтобы внутри него я скролить могла, а при скроле вне его он скрывался. в jsfiddle и в инспекторе скролл работает иначе чем на реальном телефоне. а этот кейс у меня как раз только на мобильных

[Anton fon Faust]

Нифига я не понял, что вам нужно...
Но подозреваю, что вы не правильно подходите к решению задачи.
Приведите исходное задание, или то, что вы хотите получить в конечном итоге на мобильнике.
Каково назначение этих блоков?