Как отменить position:sticky после прокрутки внутреннего контента?

Question

[Иван Медведев]

Есть секция с липким позициированием. Внутри блок с скроллом. Как сделать так, чтобы того, как весь внутренний контент проскролится, секция менила sticky на static. Эта секция находится в средине страницы и нужно, чтобы при скроле всей страницы, данная секция прилипала к верху, далее скроллится внутренний контент, и когда он доходит до края, секция отлипает и вся страница движется дальше. Надеюсь объяснил номрально.

Разметка:

<?php echo jy_css_block('ag_b6') ?>
<section id="ag_b6_5" class="ag_b6">
	<div class="container scroll">
             Контент
	</div>
</section>

Стили:

.ag_b6 {
    position: -webkit-sticky;
    position: sticky;
    height: 100vh;
    top: 0;
    padding: 0px;
    overflow: hidden;
}
.ag_b6 .container.scroll {
    height: 100vh;
}
.ag_b6 .container {
    overflow-y: auto;
    overflow-x: hidden;
    max-width: unset;
    width: 100%;
}

Мой скрипт исхода из советов на просторах гугла не срабатывает. Я так понимаю, не работает условие.

let element = document.getElementsByClassName('scroll');
    element.onscroll = function() {
        let scroll = element.scrollTop;
        let height = element.scrollHeight - element.clientHeight;
        if (height - scroll === 0) {
            allert('Scroll end');
        }
    }

Пробовал еще так:

var scroll_elem = jQuery('.scroll'),
    elem_scroll_height = jQuery(scroll_elem)[0].scrollHeight,
    scroll_elem_height = scroll_elem.height();
    jQuery(scroll_elem).scroll(function(){
        if (jQuery(this).scrollTop() >= elem_scroll_height - scroll_elem_height) {
            // jQuery('.ag_b6').addClass('static')
            console.log('Hello');
        }
    });

Помогите! Ломаю голову второй день!

Answer 1

[sergski]

onscroll происходит для страницы? дб window.onscroll

if (height - scroll === 0) {
alert('Scroll end'); // тут опечатка в alert

}

тут вам нужно какое то действе сделать) например, добавить класс перезаписывающий position

document.querySelector('.ag_b6').classList.add('nosticky');

.ag_b6 {
    position: sticky;
  &.nosticky {
    position: static;
  }
  
}

Comments

[Иван Медведев]

Все дело в том, что условие не срабатывает. Алерт я поправил, но он к сути вопроса не относится. Условие возможно не работает из-за того, что стики дано для секции и она по факту позиционируется относительно экрана, тем самым теряя свою высоту.

Ух, танцы с бубном.