Question

由于某些原因，我无法让Spyscroll工作。任何人都可以指出问题是什么？我一整天都试图解决这个问题......

我已尝试过javascript和html + css实现，但到目前为止，它们都没有用过。当我把课程＆＃34;活跃＆＃34;在手动上css工作，但滚动导航时不会突出显示。

HTML：

<body data-spy="scroll" data-target=".navbar" data-offset="50">

    <!--==========MENU============-->

    <nav class="navbar navbar-default navbar-fixed-top">
        <ul class="nav">
            <li><a href="#1">ABOUT</a></li>
            <li><a href="#2">PROCESS</a></li>
            <li><a href="#3">SERVICES</a></li>
            <li><a href="#4">TEAM</a></li>
        </ul>
    </nav>

    <!--==========CONTENT============-->

    <section class="page" id="1">
    </section>
    <section style="background-color:red" class="page" id="2">
    </section>
    <section class="page" id="3">
    </section>
    <section style="background-color:red" class="page" id="4">
    </section>
</body>

CSS：

.nav {
  margin: 0 auto;
  list-style: none;
  text-align: center;
}
.nav li {
  display: inline-block;
  margin: 0 10px;
}
.nav li a {
  color: #000;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.2s ease;
}
.nav li a:hover {
  color: #00dcbe;
}

.nav li a.active {color:blue;}

.page {height:600px;border:1px solid #000}

Answer 1

如果您希望Spyscroll工作，那么您需要将.navbar-nav课程添加到您的 ul 中：

    .nav {
  margin: 0 auto;
  list-style: none;
  text-align: center;
}
.nav li {
  display: inline-block;
  margin: 0 10px;
}
.nav li a {
  color: #000;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.2s ease;
}
.nav li a:hover {
  color: #00dcbe;
}

.nav li a.active {color:blue;}

.page {height:600px;border:1px solid #000}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  <body data-spy="scroll" data-target=".navbar" data-offset="50">

    <!--==========MENU============-->

    
<nav class="navbar navbar-default navbar-fixed-top">

    

      
        <ul class="nav navbar-nav">
          <li><a href="#1">Section 1</a></li>
          <li><a href="#2">Section 2</a></li>
          <li><a href="#3">Section 3</a></li>
          
        </ul>

 

</nav>   

    <!--==========CONTENT============-->

  <section class="page" id="1">
  </section>
   <section style="background-color:red" class="page" id="2">
  </section>
   <section class="page" id="3">
  </section>
   <section style="background-color:red" class="page" id="4">
  </section>

  </body>

Answer 2

你的小提琴有两个简单的问题。首先，您需要在加载bootstrap javascript之前加载jquery，以便将jquery拖到外部资源列表的顶部。然后，您需要"te"添加navbar-nav，如下所示：

ul

然后它工作正常。

这是一个更新的小提琴Updated Fiddle

此外，如果您希望自定义导航链接采用蓝色，则需要先定位<ul class="nav navbar-nav">，而不是实际的li.acitve标记，然后您必须更加具体，因为a类的添加，因为它有额外的css带有bootstrap，所以你需要像这样指定你的css：

navbar-nav

Answer 3

请为Easy spyscroll进行检查-

  <div class="navigation-block">
    <ul>
      <li>
        <a href="#red" class="active">Red</a>
      </li>
      <li>
        <a href="#green">Green</a>
      </li>
      <li>
        <a href="#blue">Blue</a>
      </li>
    </ul>
  </div>
  <div class="content-block">
    <div class="box-block red" id="red"></div>
    <div class="box-block green" id="green"></div>
    <div class="box-block blue" id="blue"></div>
  </div>



    body{
      margin:0;
    }
    html,body,.content-block,.box-block{
      height:100%;
      width:100%;
      display:block;
    }
    .red{
    background:#CF0404;
    }
    .green{
     background:#75890c;
    }
    .blue{
     background:#207ce5;
    }
    *{
      box-sizing:border-box;
    }
    .navigation-block{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      background:#000;
    }
    .navigation-block ul{
      margin:0;
      padding:0;
      width:100%;
      list-style:none;
    }
    .navigation-block ul li{
      width:auto;
      float:left;
      margin-right:10px;
    }
    .navigation-block ul li a{
      width:auto;
      float:left;
      color:#fff;
      font-size:18px;
      font-weight:600;
      text-decoration:none;
      font-family:arial;
      padding:10px;
    }

    .navigation-block ul li a.active{
      color:yellow;
    }

JavaScript

  window.CP.PenTimer.MAX_TIME_IN_LOOP_WO_EXIT = 6000;

  $('.navigation-block a').on("click",function (e) {
    e.preventDefault();
      var target = this.hash;
      var $target = $(target);

      $("html, body").stop().animate({
          "scrollTop": $target.offset().top - 40
      }, 600, 'swing', function () {
          // window.location.hash = target;
          history.replaceState(undefined, undefined, target)
      });
      $('.banner-navigation').find('li a').removeClass('active');
      $(this).parents('li a').addClass('active');

  });


  // scroll fixed

    function getSections($links) {
      return $(
        $links
          .map((i, el) => $(el).attr('href'))
          .toArray()
          .filter(href => href.charAt(0) === '#')
          .join(','),
      );
    }

    function activateLink($sections, $links) {
      const yPosition = $window.scrollTop();

      for (let i = $sections.length - 1; i >= 0; i -= 1) {
        const $section = $sections.eq(i);

        if (yPosition >= $section.offset().top - 40) {
          return $links
            .removeClass('active')
            .filter(`[href="#${$section.attr('id')}"]`)
            .addClass('active');
        }
      }
    }

    function onScrollHandler() {
      activateLink($sections, $links);
    }

    // Variables
    const $window = $(window);
    const $links = $('.navigation-block li a');
    const $sections = getSections($links);
    const $root = $('html, body');
    const $hashLinks = $('a[href^="#"]:not([href="#"])');

    // Events
    $window.on('scroll', onScrollHandler);

Spyscroll无法正常工作

3 个答案: