Question

我有一个粘性标题，我已经使用css和javascript设置了。以及标题中的大型菜单。问题是，当你到底部时，然后点击下拉列表的更多链接，它会滚动回到顶部。我很难过。这是我的标题和超级菜单的JavaScript。这是受影响的代码。就像我说它的功能正常，而不是当我点击更多的链接时滚动到顶部。

为了更容易，因为我不能只发布整个索引，这里是链接。正如我之前所说，它是javascript的一个问题。

http://beta.mstsage.com/sage-theme/

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 100) {
        $(".header-container").addClass("small");
    } else {
        $(".header-container").removeClass("small");
    }
});

$('.more').click(function(){
   $(this).toggleClass('active');
    $('.slide-down').toggle();
});

<div id="header-container" class="container-fluid header-container">

    //** Nav Menu
    <div class="row">
        <div class="col-12">
            <ul class="quick-links">
                <li class="quick-link">
                    <a href="#" class="link">News</a>
                </li>
                <li class="quick-link">
                    <a href="#" class="link">Videos</a>
                </li>
                <li class="quick-link">
                    <a href="#" class="link">Reviews</a>
                </li>
                <li class="quick-link">
                    <a href="#" class="link">Wikis</a>
                </li>
                <li class="quick-link more">
                    <a href="#" class="link">More
                        <i class="fa fa-caret-down"></i>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="mega-menu-container more-container slide-down">
    <div class="row no-gutters more-menu row-padding slide" style="height: 390px">
        <div class="col-12">
            <div class="row menu-content main-menu">
                <div class="col-6 menu-side left">
                    <h1 class="more-menu-label">MstSage Entertainment</h1>
                    <div class="row no-gutters cols-nav">
                        <div class="col-6">
                            <ul class="col-nav">
                                <li class="col-nav-link"><a href="#" class="link">About Us</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Accessibility</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Advertise</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Careers</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Content Team</a></li>
                            </ul>
                        </div>
                        <div class="col-6">
                            <ul class="col-nav">
                                <li class="col-nav-link"><a href="#" class="link">Press Release</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Privacy Policy</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Site Map</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Standards</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Terms of Use</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col menu-side right">
                    <div class="row cols-nav">
                        <div class="col-4">
                            <h1 class="text-center more-menu-label">Social</h1>
                            <ul class="align-items-center col-nav">
                                <li class="col-nav-link"><a href="#" class="link">Podcasts</a></li>
                                <li class="col-nav-link"><a href="#" class="link">YouTube</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Facebook</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Twitter</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Twitch</a></li>
                            </ul>
                        </div>
                        <div class="col-4">
                            <h1 class="text-center more-menu-label">Entertainment</h1>
                            <ul class="align-items-center col-nav">
                                <li class="col-nav-link"><a href="#" class="link">Movies</a></li>
                                <li class="col-nav-link"><a href="#" class="link">TV Shows</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Comics</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Tech</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Trailers</a></li>
                            </ul>
                        </div>
                        <div class="col-4">
                            <h1 class="text-center more-menu-label">Games</h1>
                            <ul class="align-items-center col-nav">
                                <li class="col-nav-link"><a href="#" class="link">PlayStation</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Xbox</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Nintendo</a></li>
                                <li class="col-nav-link"><a href="#" class="link">PC</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Mobile</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Upcoming</a></li>
                                <li class="col-nav-link"><a href="#" class="link">eSports</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="menu-content legal"><span class="legal-text">©2006-2018 MstSage Entertainment</span></div>
        </div>
    </div>
</div>

Answer 1

它跳到顶端的原因是因为href的{{1}}设置为<a>，这是它应该做的。尝试将#替换为href="#"，它应该与您的工作方式相符。：）

单击菜单活动项目时，页眉滚动到顶部

1 个答案: