Блог

Я создаю веб-сайт с боковой панелью, которая, как только пользователь прокручивает определенную точку, становится фиксированной на сайте. Этот код работает нормально.

Проблема, с которой я сталкиваюсь, заключается в том, что боковая панель перекрывает нижний колонтитул, когда пользователь прокручивает страницу вниз. Я написал код, чтобы определить, когда нижняя часть боковой панели попадает в ту же позицию, что и содержащий элемент, — когда это происходит, я занимаю позицию нижней части содержащего элемента и вычитаю высоту элемента боковой панели и использую это число, чтобы придать боковой панели новую «вершину» (в то время кактакже изменение позиции на «абсолютную»).

Вот где я сталкиваюсь с проблемой — как только боковая панель оказывается поверх нижнего колонтитула, когда пользователь прокручивает вызываемый код, он чередуется между обычным «фиксированным» кодом позиции и «абсолютным» позиционированным кодом, придающим ему этот мерцающий эффект.

Ни за что на свете я не могу понять, почему продолжает вызываться «фиксированный» код.

Вот код:

     ( function( $ ) {

        var sidebar_pos = $('#secondary')[0].getBoundingClientRect();
        var pos_top = sidebar_pos.top   window.scrollY; //need this to get the pos of TOP in the browser - NOT the viewport
        var main_pos = $('.main-content')[0].getBoundingClientRect();
        var main_bottom = main_pos.bottom    window.scrollY;
        var stop_pos;
        var i = 0;
        $(window).scroll(function(event){
            var scroll = $(window).scrollTop();
            var produce_pos = $('.produce')[0].getBoundingClientRect();
            var pos_bottom = produce_pos.bottom    window.scrollY;
            //console.log("scroll " scroll);
            //console.log("top "   pos_top);
            console.log(main_bottom);
            console.log('bottom '   pos_bottom);
               if( scroll >= pos_top){
                if ( pos_bottom >= main_bottom ){
                    //if the sidebar would end up overlapping the footer
                    if(i == 0){
                        //only need to set this once, not on every scroll
                        stop_pos = main_bottom  - $('#secondary').height() ;
                    } 
                    $('#secondary').removeClass('hover').css({
                        position: 'absolute',
                        margin:0,
                        left: sidebar_pos.left,
                        top: stop_pos
                    });
                    i  ;
                } else {
                    $('#secondary').addClass('hover').css({
                        position: 'fixed',
                        left: sidebar_pos.left,
                        marginTop: '1.5em',
                        top: 20
                    });
                    setTimeout(() => {
                        $('*[data-widget="comet"]').addClass('active');
                    }, 5000);
                    setTimeout(() => {
                        $('*[data-widget="produce"]').addClass('active');
                    }, 7000);
                }
            } else if( scroll < pos_top amp;amp; $('#secondary').hasClass('hover') ){  //if user scrolls up past original pos of sidebar, remove effects
                $('#secondary').removeClass('hover').css({
                    position: 'relative',
                    left: 'auto',
                    top: 'auto'
                });
                i = 0;
            }
        });
}( jQuery ) );
  

У меня также есть codepen скрипта в действии.
https://codepen.io/antlaur00/pen/ExyrgYR

Любая помощь очень ценится! Спасибо!

Ну, это довольно просто, просто добавьте свойство Z-index в свой CSS нижнего колонтитула, таким образом, оно всегда будет перекрывать вашу боковую панель. Вы можете обратиться к этой статье о свойстве z-index https://www.w3schools.com/cssref/pr_pos_z-index.asp