Question

我无法阻止我的导航栏专注于联系人，它应该专注于它所在的网页部分，但它没有，而是专注于联系人。当我删除联系人时，它会关注列表中具有类页面滚动的下一个最后一个。

http://www.paddykeoghgoode.com/

我最近一直在修改我的个人网站，并且我设法使网站的联系部分始终激活顶部标题。

在检查网页上的元素时，列表类的联系人处于活动状态，这通常会导致此类问题发生。

<li class="page-scroll active">

虽然在我的实际源代码中它看起来像这样：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav navbar-right">
    <li class="hidden">
      <a href="#page-top"></a>
    </li>
    <li class="page-scroll">
      <a href="#portfolio">Portfolio</a>
    </li>
    <li class="page-scroll">
      <a href="#about">About</a>
    </li>
    <li class="page-scroll">
      <a href="#contact">Contact</a>
    </li>
    <li class="topmenu">
      <a href="http://www.paddykeoghgoode.com/blog">Blog</a>
    </li>
  </ul>
</div>

没有发生这种情况的例子。我相信这与课程页面滚动有关，但无法隔离导致它自动悬停的原因而不是悬停并专注于它所在页面的部分。

我认为这是导致问题的JS，但不确定要修改什么

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #1a242f;

我可以将背景颜色更改为任何内容，但是一旦我这样做，您就不能将鼠标悬停在联系人上，它与导航栏中的其他项目具有相同的效果。

以下是可能影响它的freelancer.js：

/*!
 * Start Bootstrap - Freelancer Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

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

// Floating label headings for the contact form
$(function() {
    $("body").on("input propertychange", ".floating-label-form-group", function(e) {
        $(this).toggleClass("floating-label-form-group-with-value", !! $(e.target).val());
     }).on("focus", ".floating-label-form-group", function() {
         $(this).addClass("floating-label-form-group-with-focus");
     }).on("blur", ".floating-label-form-group", function() {
          $(this).removeClass("floating-label-form-group-with-focus");
      });
 });

// Highlight the top nav as scrolling occurs
$('body').scrollspy({
     target: '.navbar-fixed-top'
})

// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
    $('.navbar-toggle:visible').click();
});

Answer 1

看起来没有JS来处理将active类从一个菜单项更改为另一个菜单项。

将freelancer.js文件中的滚动功能编辑为以下内容：

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

        $('.navbar-nav .active').removeClass('active');
        $anchor.closest('li').addClass('active');

        event.preventDefault();
    });
});

你也可以将它添加到你的CSS中，以防止点击它后网站标题保持黑暗：

.navbar-default .navbar-brand:focus {
    color: #ffffff;
}

Answer 2

在CSS中，将body更改为：

body {
  position: relative;
  height: 100%;
  overflow-x: hidden;
}

那应该解决你所谈论的问题。

我还建议进行以下修改：
从bootstrap.min.css文件中查找并删除它们 1. , .nav>li>a:focus
2. ,.navbar-default .navbar-nav>li>a:focus

将此添加到您的freelance.css文件中 1. .nav>li>a{ text-decoration: none;}

这些只是建议。

Navbar专注于列表的最后部分

2 个答案: