带有放置部分链接的导航栏答案

【问题标题】：Navbar with dropping sections link带有放置部分链接的导航栏
【发布时间】：2015-06-16 00:54:16
【问题描述】：

我正在开发一个导航栏，该导航栏在活动时会丢失链接。一切都可以在 .click 上运行，但在 .scroll 中，我的活动设置除了更改活动墨水颜色外都可以正常工作。任何帮助将不胜感激。

这是我的 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');
    });   
});

【问题讨论】：

标签： jquery twitter-bootstrap navbar

【解决方案1】：

我自己没有做过jquery，但是我用过编辑器Netbeans，它可能让设计更好？不确定。我建议尝试一下： https://netbeans.org/kb/docs/web/js-toolkits-jquery.html

【讨论】：

谢谢，我得看看。我以前没有听说过 Netbeans。

【解决方案2】：

我找到了问题的解决方案，这是一个相对简单的解决方案。使用 bootstrap 时，你必须重写他们的一些 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

【讨论】：