javascript - 滑动导航菜单 (sliiide.js) 部分工作

Question

我正在尝试滑动导航菜单。我正在使用 sliiide.min.js .当我停留在页面顶部时，以下设置有效，但是当我向下滚动并单击以滑动菜单时，它会在实际菜单的位置给出一个空白的白色部分，我不知道如何整理.如果您之前遇到过类似问题，请分享。我正在提供完整的代码。

HTML 菜单

<div id="tablet-mobile-menu" class="sidr left" style="visibility: hidden; display: block; left: 0px;">
    <div class="utility-nav">
        <div class="main-menu">
            <ul id="burger-menu" class="links clearfix">
                <li class="menu-15461 first">
                    <a href="" id="hamburger-subscribe" class="burger" style="color: #fc0; text-transform: uppercase;">Follow Us On</a>
                </li>
                <div class="utility-menu">
                    <ul id="hamburger-utility-menu" class="links clearfix">
                        <li class="menu-7731 first">
                            <a href="" id="facebook" class="facebook burger">Facebook</a>
                        </li>
                            <a href="" id="pinterest" class="pinterest burger">Pinterest</a>
                        </li>
                    </ul>
                </div>
                <li class="menu-15461 first" style="">
                    <a href="" id="hamburger-subscribe" class="burger" style="color: #fc0; text-transform: uppercase;">Sections</a>
                </li>
            </ul>
        </div>
            <p>Men's Health, The Brand Men Live By</p>
            <p>Copyright © 2016 Rodale Inc. No reproduction, transmission or display is permitted without the written permissions of Rodale Inc.</p>
            <p>
                <a href="">Privacy Policy.</a>&nbsp;&nbsp;&nbsp;

                <a href="">About Us.</a>
            </p>
        </div>
    </div>

这是 JS 配置:

<?php $this->script()->captureStart(); ?>

                                    var settings = {
                                    toggle: "#menu-btn-toggle", // the selector for the menu toggle, whatever clickable element you want to activate or deactivate the menu. A click listener will be added to this element.
                                    exit_selector: ".is-active", // the selector for an exit button in the div if needed, when the exit element is clicked the menu will deactivate, suitable for an exit element inside the nav menu or the side bar
                                    animation_duration: "0.1s", //how long it takes to slide the menu
                                    place: "left", //where is the menu sliding from, possible options are (left | right | top | bottom)
                                    animation_curve: "cubic-bezier(0.54, 0.01, 0.57, 1.03)", //animation curve for the sliding animation
                                    body_slide: true, //set it to true if you want to use the effect where the entire page slides and not just the div
                                    no_scroll: true, //set to true if you want the scrolling disabled while the menu is active
                                    };

                                    $('#tablet-mobile-menu').sliiide(settings); //initialize sliiide



<?php $this->script()->captureEnd(); ?>

这是点击或切换按钮所在的 HTML:

<div id="menu-btn">
    <a href="/" title="Menu" id="menu-btn-toggle" class="clickable">
       <!--<i class="fa fa-bars fa-2x" aria-hidden="true"></i>-->
       <!--<i class="fa fa-times fa-2x" aria-hidden="true"></i>-->
        <span></span>  
    </a>
</div>

Answer 1

也许 slider 就在那里，只是位于页面的顶部，所以您看到的是菜单的底部。

您是否尝试过将 CSS 样式添加到导航顶部，使其即使在滚动时也能固定在页面顶部。

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