Twitter Bootstrap 3導航菜單意外的行爲

我爲我的網站使用twitter引導。導航欄鏈接在點擊時激活，但當我滾動到頁面的特定部分時，我想要相同的效果。即（鏈接變成灰色的點擊，我想同樣的效果，當我在滾動的那款）Twitter Bootstrap 3導航菜單意外的行爲

// jQuery代碼

$(document).ready(function() { 

$(function() { 
    $('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html,body').animate({ 
      scrollTop: target.offset().top - 50 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
}); 


$('.nav li a').on('click', function() { 
     $(this).parent().parent().find('.active').removeClass('active'); 
     $(this).parent().addClass('active'); 
    }); 


});

我一直在使用Twitter的scrollspy嘗試，但因爲這行代碼的scrollTop：target.offset（）。top - 50我有一些問題。示例當我點擊聯繫人時，它會繼續聯繫部分，但導航菜單中的投資組合鏈接處於活動狀態。

我的網站： www.nakibmomin.com

來源

2014-09-04 Nakib

也許有更好的解決方案，但它的工作原理。

$(document).scroll(function(){ 
    var ma = []; 
    if(!$('html,body').is(':animated')){ 
     $('body>div[id]').each(function(i,o){ 
      ma.push({ i:$(o).attr('id'), p:$(o).position().top + $(o).outerHeight()}); 
     }); 
     for(m in ma){ 
      f = ma[m]; 
      if (f.p >= $(document).scrollTop()+$(window).height()/3){ 
       $('.menu>li.active').removeClass('active'); 
       $('.menu>li>a[href=#'+f.i+']').parents('li').addClass('active'); 
       break; 
      } 
     } 
    } 
});

來源

2014-09-08 09:50:13 user2721793

這工作完美的滾動，但當我點擊例如關於我的家庭鏈接眨眼.....如果我點擊關於我的技能眨眼 – Nakib 2014-09-08 22:59:36

與is（'：animated'），你可以檢查是否其他動畫是進行中。我修改了腳本。 – user2721793 2014-09-09 07:09:03

完美....感謝的人 – Nakib 2014-09-09 19:25:16

嘗試申請的-60offset爲scrollspy，適用抵消了。 From here

來源

2014-09-08 07:15:50 Justinas

好了，做這樣的事情：

添加全局函數檢測元件能見度（Ref）：

function isScrolledIntoView(elem) 
{ 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 

    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height(); 

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
}

然後附上滾動監聽器：

$(window).scroll(function(){ 

    if(window.isScrolledIntoView('#portfolio')){ 
     $('.menu li').removeClass('active') 
     $('[href="#portfolio"]').parent().addClass('active'); 
    } 

});

來源

2014-09-08 11:59:29

Twitter Bootstrap 3導航菜單意外的行爲

回答

相關問題