如何修复滚动以锚定单页响应菜单?

时间:2015-07-06 18:50:31

标签: jquery css

我创建了单页设计。所有内容都在一个地方 - 主页。用jQuery我代码创建一个去锚定导航。当滚动菜单的当前状态正在更新时,当点击链接时,它将滚动到该链接的正确位置/部分。

不幸的是,菜单在平板电脑和智能手机上效果不佳。 当我将视口更改为平板电脑时,它将滚动到该位置,但随后它将停止到早期,因此它不在浏览器的顶部。在移动设备上,它会滚动到错误的位置,organisatie将始终是当前菜单项。是否有针对此问题的修复程序?

// One Page Navigation - scroll to anchor id
    $('#primary-navwrapper, #footer .list-of-links').find('li a[href^="#"]').click(function(event) { 
    //primary-navwrapper li:not(.prev-page, .next-page), .list-of-links li

        // Prevent from default action to intitiate
        event.preventDefault();

        // Update active class on click
        $('#primary-navwrapper li a').removeClass('current');
        $(this).addClass('current');

        // The id of the section we want to go to
        // var anchor = this.hash;
        var anchorId = $(this).attr('href');
        //console.log(anchorId);
        scrollToAnchor(anchorId);

        if (isMobile) {
            nav.slideToggle();
        } 

        return false;

    });


    function scrollToAnchor(anchorId) {

        // Our scroll target : the top position of the section that has the id referenced by our href
        if (anchorId.length) {
            var target = $(anchorId).offset().top - offset;
            //console.log("target" + target);
        }


        // The magic...smooth scrollin' goodness.
        $('html, body').animate({ scrollTop: target }, 500, function () {
            //window.location.hash = '!' + id;
            window.location.hash = anchorId;        
        });

    }

你可以看到它here

0 个答案:

没有答案