Как сохранить липкий navbar в пределах определенной ширины тела? - PullRequest
Новая
       14

Как сохранить липкий navbar в пределах определенной ширины тела?

1 голос
/ 08 марта 2019

При прокрутке моя липкая навигационная панель переходит от ширины тела (максимум 1450 пикселей) к ширине экрана 100%. https://biogenity.com/RC19/index.html Я определил ширину тела с помощью CSS: 

    body {
      max-width: 1450px;
    }

Для липкой панели навигации я в настоящее время использую 100% ширину, но она не применяется в пределах ширины body . Я не совсем уверен, что использовать вместо этого. 

    .sticky.is-sticky {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 1000;
        width: 100%;
    }

Может ли это быть исправлено через .js? 

            $(document).ready(function () {
            // Custom function which toggles between sticky class (is-sticky)
            var stickyToggle = function (sticky, stickyWrapper, scrollElement) {
                var stickyHeight = sticky.outerHeight();
                var stickyTop = stickyWrapper.offset().top;
                if (scrollElement.scrollTop() >= stickyTop) {
                    stickyWrapper.height(stickyHeight);
                    sticky.addClass("is-sticky");
                }
                else {
                    sticky.removeClass("is-sticky");
                    stickyWrapper.height('auto');
                }
            };

            // Find all data-toggle="sticky-onscroll" elements
            $('[data-toggle="sticky-onscroll"]').each(function () {
                var sticky = $(this);
                var stickyWrapper = $('<div>').addClass('sticky-wrapper'); // insert hidden element to maintain actual top offset on page
                sticky.before(stickyWrapper);
                sticky.addClass('sticky');

                // Scroll & resize events
                $(window).on('scroll.sticky-onscroll resize.sticky-onscroll', function () {
                    stickyToggle(sticky, stickyWrapper, $(this));
                });

                // On page load
                stickyToggle(sticky, stickyWrapper, $(window));
            });
        });

Заранее спасибо.

1 Ответ

0 голосов
/ 08 марта 2019

Используя position:fixed, вы удаляете элемент из обычного потока документов, поэтому я не верю, что стили тела применимы.

С позиции - CSS: каскадные таблицы стилей | MDN

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

Таким образом, вы должны установить для него максимальную ширину и отцентрировать его, установив left и right в auto: 

.sticky.is-sticky {
    position: fixed;
    max-width: 1450px;
    left: auto;
    right: auto;
    top: 0;
    z-index: 1000;
    width: 100%;
}
...