Question

我正在为我的网站使用Twitter引导程序。导航栏链接在点击时激活，但当我滚动到页面的特定部分时我想要相同的效果。即（链接在点击时变为灰色，当我滚动该部分时我想要相同的效果）

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


});

我尝试使用twitters scrollspy ，但由于这行代码 scrollTop：target.offset（）。top - 50 我遇到了一些问题。示例当我点击“联系”时，它会显示在联系人部分，但在导航菜单中激活了投资组合链接。

我的网站： www.nakibmomin.com

Answer 1

尝试将offset的{{1}}应用于scrollspy，以应用偏移量。 From here

Answer 2

也许有更好的解决方案，但它确实有效。

$(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;
            }
        }
    }
});

Answer 3

好的，做这样的事情：

添加全局函数以检测元素可见性（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');
   }

});

Twitter Bootstrap 3导航菜单意外行为

3 个答案: