Question

滚动时，我的导航栏从主体宽度（最大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));
            });
        });

谢谢。

Answer 1

通过使用position:fixed，您可以从常规文档流中删除该元素，因此我认为不适用正文样式。

来自position - CSS: Cascading Style Sheets | MDN

该元素已从常规文档流中删除，并且没有空格为页面布局中的元素创建的。

因此，您应该为其设置最大宽度并通过将left和right设置为auto来使其居中：

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

如何将粘性导航栏保持在定义的宽度内？

1 个答案: