Я создал липкую панель навигации на основе примера из школ W3 . Он работает очень хорошо - кроме случаев, когда я изменяю размер окна, выравнивание навигационного меню по содержимому страницы неверно.
Вы увидите, что у меня есть код, который находит правильное смещение для левой стороны меню, отметив другой элемент на странице. Затем он добавляет отступ слева, чтобы правильно выровнять его. (Без этого значение position:fixed просто отправляет липкую навигацию в крайний левый угол страницы).
Это отлично работает при прокрутке! Однако, если размер окна изменяется по горизонтали, это значение левого заполнения не обновляется.
Я пробовал несколько итераций $(window).resize, но не смог заставить его работать. Я уверен, что это простая строка кода, которую я просто не понимаю. Заранее благодарим!
setTimeout(function () {
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
// Get the navbar
var navbar = document.getElementById("app");
// Get the offset position of the navbar
var sticky = $("#app").offset().top
// Find correct offset for left side of menu (by checking #title element)
var element = document.getElementById('title');
var leftPos = element.getBoundingClientRect().left + window.scrollX;
var roundLeft = (Math.round(leftPos)) - 5;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
navbar.style.cssText = "padding-left:" + roundLeft + "px!important";
} else {
navbar.classList.remove("sticky");
navbar.style.cssText = "padding-left:inherit";
}
}
}, 4000);
.sticky {
position: fixed;
top: 0;
width: 100%;
background: rgba(255, 255, 255, 0.99);
z-index: 9 !important;
max-width: none !important;
box-shadow: 0px 1px 10px #999;
}
(я использую setTimeout, потому что нашему приложению Shiny требуется несколько секунд для загрузки и заполнения содержимого.)