2017-05-31 86 views
1

我需要JQuery的幫助,我相信這可能是明顯的解決方案,但我不知道該怎麼做。關於我的滾動頁面上的導航欄,我希望導航欄上的其中一個鏈接轉到外部頁面(而不是頁面中的部分)。它會做到這一點,但它會弄亂滾動頁面,(背景移動到錯誤的部分等)。我相信我必須改變refElement,但我不確定..請幫助:(謝謝Scrollspy - 將導航欄頁面鏈接到外部URL時搞亂了頁面

/*========================================================================= 
     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 
}); 

----------------------- ------ HTML --------------------------------

<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> 

回答

0

謝謝

/** 
* Scroll Spy via Bootstrap 
*/ 
$('body').scrollspy({target: "#nav_wrapper", offset:50}); 

/** 
* Scroll Spy meet WordPress menu. 
*/ 
// Only fire when not on the homepage 
if (window.location.pathname !== "/") { 
    // Selector for top nav a elements 
    $('#top_main_nav a').each(function() { 
     if (this.hash.indexOf('#') === 0) { 
      // Alert this to an absolute link (pointing to the correct section on the hompage) 
      this.href = "/" + this.hash; 
     } 
    }); 
} 

/** 
* Initiate Awesome Smooth Scrolling based on a.href 
*/ 
$('a.smooth-scroll, #top_main_nav a').click(function() { 
    target = $(this).attr('href'); 
    offset = $(target).offset(); 
    $('body,html').animate({ scrollTop : offset.top }, 700); 
    event.preventDefault(); 
});