Bootstrap 滚动导航栏问题

Question

我正在开发的网站：zarwanhashem.com

你可以在这里找到我之前的问题（包括我的代码）：Bootstrap one page website themev formatting problems

选择的答案解决了我的问题，但由于使用 -50 的 jQuery 调整，我遇到了另一个问题。现在导航栏错误地指示我所在的页面。即导航栏应该使您当前所在的部分变暗。因此，如果您单击“关于”，它将带您到“关于”页面并使导航栏中的“关于”链接变暗。但是您所在页面之前的链接被突出显示，因为 -50 使导航栏认为它在上一节中。您可以轻松地尝试一下，看看我的意思。

我该如何解决这个问题？谢谢。我没有将其添加到旧问题中的原因是该人不再看它。

另外，请保持您的解释简单/对我来说稍微简化一下。我知道非常基本的 HTML 和 CSS，但我不会任何 Javascript。

滚动js：

//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
    if ($(".navbar").offset().top > 50) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }
});

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top -50
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

按照前一个问题中海报的建议，在文档末尾添加了 js：

$(window).ready(function(){
    $('div[class^="content-section"]').css('min-height', $(window).height());
    })

Answer 1

您以某种方式将 .active 类放在了错误的元素上。您需要将 .active 类放在单击的元素上。您应该使用 js 处理活动状态。这是我基于您的 HTML 结构的解决方案，但我相信也有不同的解决方案。

$(document).on('click', '.page-scroll', function(event) {
   var clicked = event.target; //get the clicked element
   if($(clicked).closest('ul').hasClass('dropdown-menu')){ //check if clicked element is inside dropdown
      $(clicked).closest('ul').parent().siblings().removeClass('active'); //remove active class from all
      $(clicked).closest('ul').parent().addClass('active'); add active class on clicked element parent - in your case <li> tag.
   }else{
      $(clicked).parent().siblings().removeClass('active');
      $(clicked).parent().addClass('active');
   }
}

让我知道这是否适合你。

发布代码后进行编辑

尝试用这个替换你的函数：

$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top -50
        }, 1500, 'easeInOutExpo');

        if($($anchor).closest('ul').hasClass('dropdown-menu')){
           $($anchor).closest('ul').parent().siblings().removeClass('active'); 
           $($anchor).closest('ul').parent().addClass('active'); 
        }else{
           $($anchor).parent().siblings().removeClass('active');
           $($anchor).parent().addClass('active');
        }
        event.preventDefault();
    });
});

Answer 2

这里有一个解决这个问题的方法。 只需将 scrolling-nav.js 的内容更改为以下内容：

//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
    $(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
    $(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top -50
    }, 1500, 'easeInOutExpo', function(){
        $('ul.navbar-nav li, ul.dropdown-menu li').removeClass('active');
        $($anchor).parent('li').addClass('active');
    });
    event.preventDefault();
}); 
});