Как сделать, чтобы второе меню Navbar Sticky работало правильно? - PullRequest
Новая
       40

Как сделать, чтобы второе меню Navbar Sticky работало правильно?

0 голосов
/ 17 февраля 2020

Здравствуйте, мой веб-сайт. Я хочу, чтобы вторая белая строка меню переместилась в верхнюю середину и осталась сверху, когда я начну прокручивать страницу вниз. Я следовал учебному пособию о том, как это сделать, но по какой-то причине он перемещается в крайнее левое положение и не расширяется до конца. (Сделал так, чтобы навигационная панель стала красной для целей тестирования.)

Я очень плохо знаком с javascript, поэтому, пожалуйста, успокойтесь со мной. :)

Это сайт, над которым я работаю. http://lonestarwebandgraphics.com/

    const nav = document.querySelector('.header-menu_wrap');
    const topOfNav = nav.offsetTop;
    
    function fixNav() {
    
        if (window.scrollY >= topOfNav) {
            document.body.style.paddingTop = nav.offsetHeight + 'px';
            document.body.classList.add('fixed-nav');
        } else {
    
            document.body.style.paddingTop = 0;
            document.body.classList.remove('fixed-nav');
    
        }
    }
    
    window.addEventListener('scroll', fixNav);
    
    // 135 140
    .fixed-nav .header-menu_wrap .header-container_wrap  {
        position: fixed;
        box-shadow: 0 5px rgba(0, 0, 0, 0.1);
        background: red;
    }
     <!-- Bottom White header START-->
            <nav class="header-menu_wrap">
                <div class="header-container_wrap container">
                    <div class="header-container__flex">
                        <div class="header_caption">
                            <!-- MENU -->
                            <nav id="site-navigation" class="main-navigation stuckMenu" role="navigation">
                                <!-- HAMBURGER BARS -->
                                <!-- <button class="menu-toggle" aria-controls="main-menu" aria-expanded="false">
                                    <i class="menu-toggle" aria-controls="main-menu8" aria-expanded="false">
                                        <i class="fas fa-bars"></i>
                                    </i>
                                </button> -->
                                <!-- HAMBURGER BARS END -->
                                <!-- MENU START -->
                                <ul class="menu" id="main-menu">
                                    <li><a href="#about">ABOUT</a></li>
                                    <li><a href="#services">SERVICES</a></li>
                                    <li><a href="#photo-gallery">PHOTO GALLERY</a></li>
                                    <li><a href="#video-example">VIDEO EXAMPLE</a></li>
                                    <li><a href="#contacts">CONTACTS</a></li>

                                </ul>
                                <!-- MENU START END -->
                                <!-- SEARCH ICON -->
                                <div class="header__search">
                                    <i class="fas fa-search"></i>
                                </div>
                            </nav>
                        </div>
                    </div>
                </div>
            </nav>
            
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

1 Ответ

0 голосов
/ 17 февраля 2020

На странице, которую вы предоставляете, есть несколько проблем: во-первых, если вы отделяете часть страницы, обычно лучше оставить что-то позади, чтобы удерживать высоту. Во-вторых, существует проблема с z-индексами. Наконец, это хорошая идея, чтобы прочитать координаты элементов, когда вы получаете событие onready / onload, а не раньше, потому что макет страницы может измениться или может быть недоступен, я говорю о: 

const nav = document.querySelector('.header-menu_wrap');
const topOfNav = nav.offsetTop;

Как я прокомментировал в основном посте, если я добавлю ваш предоставленный код во фрагмент, это работает для меня: 

    const nav = document.querySelector('.header-menu_wrap');
    const topOfNav = nav.offsetTop;
    
    function fixNav() {
    
        if (window.scrollY >= topOfNav) {
            document.body.style.paddingTop = nav.offsetHeight + 'px';
            document.body.classList.add('fixed-nav');
        } else {
    
            document.body.style.paddingTop = 0;
            document.body.classList.remove('fixed-nav');
    
        }
    }
    
    window.addEventListener('scroll', fixNav);
    
    // 135 140
    .fixed-nav .header-menu_wrap .header-container_wrap  {
        position: fixed;
        box-shadow: 0 5px rgba(0, 0, 0, 0.1);
        background: red;
    }
     <!-- Bottom White header START-->
            <nav class="header-menu_wrap">
                <div class="header-container_wrap container">
                    <div class="header-container__flex">
                        <div class="header_caption">
                            <!-- MENU -->
                            <nav id="site-navigation" class="main-navigation stuckMenu" role="navigation">
                                <!-- HAMBURGER BARS -->
                                <!-- <button class="menu-toggle" aria-controls="main-menu" aria-expanded="false">
                                    <i class="menu-toggle" aria-controls="main-menu8" aria-expanded="false">
                                        <i class="fas fa-bars"></i>
                                    </i>
                                </button> -->
                                <!-- HAMBURGER BARS END -->
                                <!-- MENU START -->
                                <ul class="menu" id="main-menu">
                                    <li><a href="#about">ABOUT</a></li>
                                    <li><a href="#services">SERVICES</a></li>
                                    <li><a href="#photo-gallery">PHOTO GALLERY</a></li>
                                    <li><a href="#video-example">VIDEO EXAMPLE</a></li>
                                    <li><a href="#contacts">CONTACTS</a></li>

                                </ul>
                                <!-- MENU START END -->
                                <!-- SEARCH ICON -->
                                <div class="header__search">
                                    <i class="fas fa-search"></i>
                                </div>
                            </nav>
                        </div>
                    </div>
                </div>
            </nav>
            
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
...