Question

我正在尝试为朋友创建一个简单的入门摄影网站。该网站将有一个导航栏。

截至目前，我的导航栏看起来像这样

在网站的图库部分，我有三个小节，即“家庭”，“婚礼”和“朋友”。我使用JavaScript进行自动滚动功能。请参阅下面的代码。

<!--Script for smooth scrolling-->
<script>
    $(document).ready(function() {

      var scrollLink = $('.scroll');

      // Smooth scrolling
      scrollLink.click(function(e) {
        e.preventDefault();
        $('body,html').animate({
          scrollTop: $(this.hash).offset().top - 60
        }, 750 );
      });

      // Active link switching
      $(window).scroll(function() {
        var scrollbarLocation = $(this).scrollTop();
        scrollLink.each(function() {
          var sectionOffset = $(this.hash).offset().top ;
          if ( sectionOffset -75 <= scrollbarLocation ) {
            $(this).parent().addClass('active');
            $(this).parent().siblings().removeClass('active');
          }
        })
      })
    })
  </script>

我想做的是：

a）在选择子类别之前添加仍然滚动到图库链接的导航栏下拉列表，然后滚动到该链接下拉，或

b）点击图库链接旁边会显示三个新的导航栏部分。我知道这可以使用JavaScript完成，我只是在寻找一些指导。

我已经尝试添加一个下拉菜单，但第二个我添加了滚动类，下拉列表将不再出现。以下是导航栏本身的所有代码。

 <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a id = "nameBrand" class="navbar-brand" href="index.html">
                          <img id="brand-image" src="images/camIcon.png" alt="camIcon">
                          Jenny G. Photography
        </a>

      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-left">
          <li class = "nav-item active"><a class = "nav-link scroll" href="#top">Home</a></li>

          <li class="nav-item"><a class = "nav-link scroll" href="#bio">Bio</a></li>

          <li class="nav-item"><a class = "nav-link scroll" href="#gallery">Gallery</a></li>

          <li class="nav-item"><a class = "nav-link scroll" href="#pricing">Pricing</a></li>
        </ul>

          <ul class="nav navbar-nav navbar-right">
            <li><a href="form/form.php">Contact</a></li>
          </ul>

      </div><!-- /.navbar-collapse -->

根据section或href自动更新导航栏

0 个答案: