首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Scrollspy -将导航栏页面链接到外部url时页面混乱

Scrollspy -将导航栏页面链接到外部url时页面混乱
EN

Stack Overflow用户
提问于 2017-06-01 02:22:12
回答 0查看 390关注 0票数 1

我需要JQuery的帮助,我相信这可能是显而易见的解决方案,但我不知道如何去做。关于我的滚动页面上的导航栏,我希望导航栏上的一个链接转到外部页面(而不是页面中的某个部分)。它可以做到这一点,但它会弄乱滚动页面,(背景移动到错误的部分等)。我想我必须换一下refElement,但我不确定。请帮帮忙:(谢谢

代码语言:javascript
复制
/*=========================================================================
        Navbar ScrollSpy
    =========================================================================*/
    var scrollPos = $(document).scrollTop(),
        nav_height = $('#navbar').outerHeight();

    $('.navbar li a').each(function () {
        var currLink = $(this),
            refElement = $(currLink.attr('href'));
        if( refElement.size() > 0 ){
            if ( ( refElement.position().top - nav_height ) <= scrollPos ) {
                $('.navbar li').removeClass('active');
                currLink.closest('li').addClass('active');
            }else{
                currLink.removeClass('active');
            }
        }
    });


});


//Initialize smoothscroll plugin
smoothScroll.init({
    updateURL: false
});

代码语言:javascript
复制
<nav class="navbar navbar-fixed-top">
<div class=container>
    <div class=navbar-header>
        <button aria-expanded=false class="collapsed navbar-toggle" data-target=#nav-collapse data-toggle=collapse type=button><span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span></button>
    </div>
    <div class="collapse navbar-collapse" id=nav-collapse>
        <ul class="nav navbar-nav navbar-right">
            <li class=active><a href=#intro data-scroll>Home</a>
                <li><a href=#features-3 data-scroll>Marine</a>
                    <li><a href=#features-4 data-scroll>Industrial</a>
                        <li><a href=#contact data-scroll>Contact</a>
                            <li><a href="https://www.example.com" data-target>Careers</a></ul>

    </div>
</div>

EN

回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/44292131

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档