Исправлено боковое меню внутри обертки

Question

Итак, у меня есть сайт, который содержится в оболочке с максимальной шириной. На этом сайте также есть фиксированное боковое меню, которое переключается с помощью кнопки.

Моя проблема заключается в том, что фиксированное боковое меню остается внутри обертки страниц, так как фиксированные элементы относятся к окну, а не к родительскому элементу.

Вот пример использования position: fixed: https://jsfiddle.net/okavp4p1/

Как вы можете видеть в меню выходит со стороны окна просмотра, а не обертка (серая область).

Я нашел далеко вокруг этого с помощью position: absolute: https://jsfiddle.net/5q3hn1fq/

Здесь вы можете увидеть меню выходит из обертки. (Правильный)

Но я должен был написать некоторое дополнительное JQuery подменить фиксированное позиционирование на свитке.

// Fix menu 
$(window).on('load scroll resize', function() { 
    navigation.find('ul').css('top', $(window).scrollTop()); 
}); 

Но при этом этот способ вызывает сбои/задержки большинства веб-браузеров. Хотя пример не плох при прокрутке, но при реализации этого на реальном сайте с большим количеством элементов/кода это становится очень очевидным.

Вот как это выглядит в использовании при прокрутке страницы вниз:

Я думал об отключении прокруткой, когда открыто меню, но мне было просто интересно, если кто-нибудь может помочь?

Answer 1

есть работа вокруг этого. вам нужно создать панель вверху с position:fixed. Этот бар должен иметь height: 1px и не содержать фона, поэтому вы не можете его увидеть.

затем вы можете добавить навигацию к ней внутри, и float:right. когда вы плаваете вправо, он появится, но будет прикреплен к невидимой фиксированной полосе вверху. Кроме того, вы должны дать nav ширину 0, чтобы она была невидимой. то вы можете перевести его ширину на 100px или что бы вы ни хотели при нажатии кнопки.

, наконец, используйте jQuery, чтобы установить его высоту в высоту окна при изменении размера окна и при его отображении.

вот скрипка: https://jsfiddle.net/ahmadabdul3/pptggn6v/1/

поскольку бар находится внутри позиции: относительный бар, она не должен прыгать вокруг столько же (или вообще)

НЕ добавить правый или левый отступ в однако, это нарушит эффект. вместо этого вы можете поместить контейнер вокруг навигатора и сделать ширину навигатора: 90% или что-то еще, чтобы оно выглядело как дополнение.

вот обновленная скрипка с тем, как заполнение должно быть: https://jsfiddle.net/ahmadabdul3/pptggn6v/2/

Answer 2

Если проблема связана со всеми браузерами, вы можете перезаписать свою функцию, используя простой .js вместо jquery.

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

$(window).on('load scroll resize', function() { 
    document.getElementById('nav-list').style.top = window.scrollY + 'px'; 
}); 

https://jsfiddle.net/hb4zsL6g/