Question

我正在处理的网站：zarwanhashem.com

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

选择的答案解决了我的问题，但由于使用-50进行jQuery调整，我还有另一个问题。现在，导航栏错误地指示了我所在的页面。即导航栏应该会使您当前所在的部分变暗。所以，如果您点击＆＃34; about＆＃34;它将带您进入about页面并使导航栏中的about链接变暗。但是在您所在的页面之前的链接会突出显示，因为-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();
}); 
});

Bootstrap滚动导航栏问题

2 个答案: