在jquery

时间:2015-10-29 09:39:24

标签: jquery html

当我点击菜单项时,当前菜单没有突出显示而不是它突出显示一个菜单。但是当我删除窗口滚动事件然后它工作正常。我尝试了off()方法但它创建了标题位置问题

$(document).ready(function() {
    $(window).scroll(function(event) {
        $('.navmenu ul li').find('a').each(function(i) {
            var s_top = $(this).attr('href');
            var idd = $(this).parent().attr('id');

            if (idd !== 'menu2') {
                var menu_offset = $(s_top).offset().top;
                if ($(window).scrollTop() >= menu_offset) {
                    $('#' + idd).siblings().removeClass('active');
                    $('#' + idd).addClass('active');
                }
            }
        });
    });

    $('.navmenu ul li a').click(function(event) {
        $('html, body').animate({
            scrollTop: $(this.hash).offset().top - 80
        }, 800);

        var link_id = $(this).parent().next().attr('id');
        $('#' + link_id).addClass('active');
        $('#' + link_id).siblings().removeClass('active');
        return false;
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navmenu" style="text-align: center;">
    <ul id="menu">
        <li id="menu1" class="active">
            <a href="#home">Home</a>
        </li>
        <li id="menu2">
            <a data-toggle="modal" data-target="#myModal">Customer Login</a>
        </li>
        <li id="menu3">
            <a href="#how-works">How it works</a>
        </li>
        <li id="menu4">
            <a href="#feature">Feautres</a>
        </li>
        <li id="menu5">
            <a href="#pricing">Pricing</a>
        </li>
        <li id="menu6">
            <a href="#demoit">Demo it</a>
        </li>
        <li id="menu7">
            <a href="#faq">FAQ</a>
        </li>
        <li id="menu8">
            <a href="#help">Help</a>
        </li>
        <li id="menu9" class="last">
            <a href="#contact">Contact</a>
        </li>
    </ul>
</div>

1 个答案:

答案 0 :(得分:0)

我猜您的菜单高度为80px。您的点击事件有80px的差异

scrollTop: $(this.hash).offset().top - 80

所以你应该在你的滚动事件中加上80px差异,如下所示:

var menu_offset = $(s_top).offset().top - 80;