2015-06-16 4 views
0

Я работаю над навигационной панелью, у которой есть ссылки при активном подключении. Все работает на .click, но в .scroll активны все активные настройки, кроме изменения цвета активной чернил. Любая помощь будет оценена по достоинству.Navbar with dropping sections link

Вот моя ссылка jsfiddle. http://jsfiddle.net/carincamen/hsu9jj0q/34/

$(document).ready(function($){ 
     var parPosition = []; 
    $('.par').each(function() { 
     parPosition.push($(this).offset().top); 
    }); 

    $('a').click(function(){ 
     $('html, body').animate({ 
      scrollTop: $($.attr(this, 'href')).offset().top 
     }, 500); 
     return false; 
    }); 

     $('nav .navbar ul li a').click(function() { 
     $('nav .navbar ul li a').removeClass('active'); 
      $(this).addClass('active'); 
    }); 

     $(document).scroll(function(){ 
    var position = $(document).scrollTop(), 
      index; 
      for (var i=0; i<parPosition.length; i++) { 
      if (position <= parPosition[i]) { 
       index = i; 
       break; 
      } 

     } 
    $('nav .navbar ul li a').removeClass('active'); 
     $('nav .navbar ul li a:eq('+index+')').addClass('active'); 
    }); 

     $('nav .navbar ul li a').click(function() { 
     $('nav .navbar ul li a').removeClass('active'); 
      $(this).addClass('active'); 
    }); 
}); 

ответ

0

Я не сделал Jquery сам, но я использовал редактор Netbeans, и это может сделать проектирование лучше? Не уверен. Я предлагаю попробовать: https://netbeans.org/kb/docs/web/js-toolkits-jquery.html

+0

Спасибо, я должен буду смотреть на него. Раньше я не слышал о Netbeans. –

0

Я нашел решение проблемы, это было относительно легко исправить. При использовании бутстрапа вы должны переопределить некоторые из своих CSS для настройки. Чтобы сделать это, вы должны убедиться, что у вас есть система с более высокой точкой. В моем случае .active был ниже, чем bootstraps css. Добавив .nav ul li a к .active, он предоставил систему с более высокой точкой, чтобы переопределить загрузку.

http://jsfiddle.net/carincamen/hsu9jj0q/

.nav ul li a.active { 
color: rgb(207,219,218); 
text-transform: uppercase; 
top: 15px; 

}

Вот ссылка на сообщение от kaizer1v, объясняющей балльной системе, чтобы переопределить самозагрузки.

https://stackoverflow.com/a/20542297/4313248