Как настроить поведение бургер меню?

Question

[starmi81]

Всем доброго времени суток!
Друзья, подскажите, как настроит поведение бургер меню следующим образом:
1) при обычном (не мобильном) меню, нужно что бы при скроле, основное меню становилось бургером и всегда висело в поле видимости.
1.1) Возможно ли сделать, что бы цвет бургера менялся автоматом при скроле? Например на светлом фоне бургер темный, а на темном фоне бургер светлый.
2) Как сделать исчезающее мобильное меню? проблема вот в чем: сейчас у меня мобильное меню выползает слева, и при клике контент перематывается, а меню ни куда не уходит.
3) Ну и ни как не могу сообразить, как в css сделать, что бы меню выезжало справа, а не слева.
https://codepen.io/boulingist81/pen/MWOQqJL
Спасибо за ваши советы!

Answer 1

[Rst0]

1) всегда или только после прокрутки немного вниз ? т е меню всегда мобильное?
1.1) Возможно
2) уточните первый пункт
3) сменить

.header__menu {
        position: fixed;
        top: 0;
        
       /* left: -100%;*/       right:-100%;
  
        width: 50%;
        height: 100%;
        overflow: auto;
        background-color: black;
        transition: all  0.3s ease 0s;
        padding: 70px 10px 20px 10px;
    }
    .header__menu.active {
       /* left: 0;*/       right:0;

    }

Comments

[starmi81]

Rst0
Доброго дня.
Благодарю за ответ.
По первому пункту:
Суть идеи такова:
при обычном варианте (не мобильном) страница отображается с обычным меню.
После прокрутки немного вниз, меню переходит в состояние бургера.

[Rst0]

Google_drive
готово, стили в отдельном файле - вроде работает по пунктам
если чего не понятно задавайте вопросы
масимально не касался верстки и не менял названия классов,
в основном CSS и,
поскольку раздел JS, реализовал максимально на JS ( jquery) - раз уж он используется).
Это кусок для примера- как устроено.

const sticky = 200; //  прокрутка до включения  header-sticky
var scrollBar = 0;  //  ширина полосы прокрутки = padding-right, чтоб не дергался экран при открытии меню

function scrollbarWidth() {
    var block = $('<div>').css({'height':'50px','width':'50px'}),
        indicator = $('<div>').css({'height':'200px'});

    $('body').append(block.append(indicator));
    var w1 = $('div', block).innerWidth();    
    block.css('overflow-y', 'scroll');
    var w2 = $('div', block).innerWidth();
    $(block).remove();
    scrollBar = (w1 - w2);
    document.documentElement.style.setProperty('--scrollBar', `${scrollBar}px`); 
//добавляем переменную --scrollBar к root: , чтоб использовать в css для рассчетов
}

$(document).ready(function() {
	$('.header__burger').click(function(event) {
		$('.header__burger,.header__menu').toggleClass('active');
        $('body').toggleClass('lock'); //блокируем body
	});
        $('.header__list').click(function(event) {  // удаляем меню и разблокируем body
                $('.header__burger,.header__menu').removeClass('active');
                $('body').removeClass('lock'); 
        });

        scrollbarWidth(); // вычисляем полосу прокрутки
});

        window.onscroll = function() {  //header-sticky
               if(window.pageYOffset > sticky){
                   $('body').addClass('header-sticky');
               }else{
                  $( 'body').removeClass('header-sticky');
               }
             scrollbarWidth(); // вычисляем полосу прокрутки
        }