Issue with Spyscroll functionality

Question

Issue with Spyscroll functionality

Having some trouble getting Spyscroll to work. Can anyone help me identify the issue? I've been at it all day...

I've attempted both the javascript and html+css setups, but neither seem to be functioning correctly. Manually adding the "active" class to the link works for styling, but the navigation is not highlighting as I scroll.

Check out the Fiddle here

Here's the HTML snippet:

<body data-spy="scroll" data-target=".navbar" data-offset="50">
    <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>

    <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>

And here's the CSS snippet:

.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}

jquery html css twitter-bootstrap

Answer 1

Answer №1

To enable the functionality of Spyscroll, ensure that you include the .navbar-nav class in your ul element as shown below:

    .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

To enable the functionality of Spyscroll, ensure that you include the .navbar-nav class in your ul element as shown below:

    .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 3

Answer №2

Your fiddle has a couple of simple issues that need to be addressed. Firstly, ensure that you load jquery before bootstraps's javascript by placing jquery at the top of the external resources list. Secondly, don't forget to include navbar-nav in your ul element like this:

<ul class="nav navbar-nav">

After making these changes, everything should work smoothly.

You can find an updated version of your fiddle here.

If you want your active nav link to appear in blue, make sure to target the li.active instead of the a tag specifically, and be more precise due to the additional styles applied by the navbar-nav class in bootstrap. Here is an example CSS code to achieve this effect:

.navbar-default .navbar-nav li {
  display: inline-block;
  margin: 0 10px;
}
.navbar-default .navbar-nav li a {
  color: #000;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.2s ease;
}
.navbar-default .navbar-nav li a:hover {
  color: #00dcbe;
}
.navbar-default .navbar-nav li.active a {
  color:blue;
}

Answer 4

Your fiddle has a couple of simple issues that need to be addressed. Firstly, ensure that you load jquery before bootstraps's javascript by placing jquery at the top of the external resources list. Secondly, don't forget to include navbar-nav in your ul element like this:

<ul class="nav navbar-nav">

After making these changes, everything should work smoothly.

You can find an updated version of your fiddle here.

If you want your active nav link to appear in blue, make sure to target the li.active instead of the a tag specifically, and be more precise due to the additional styles applied by the navbar-nav class in bootstrap. Here is an example CSS code to achieve this effect:

.navbar-default .navbar-nav li {
  display: inline-block;
  margin: 0 10px;
}
.navbar-default .navbar-nav li a {
  color: #000;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.2s ease;
}
.navbar-default .navbar-nav li a:hover {
  color: #00dcbe;
}
.navbar-default .navbar-nav li.active a {
  color:blue;
}

Answer 5

Answer №3

Kindly review this for 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);

Answer 6

Kindly review this for 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);

Issue with Spyscroll functionality

Answer №1

Answer №2

Answer №3

Similar questions

Server elements fail to refresh following the use of JQuery AjaxUpload

How come when I applied height:100% and position: absolute to .test2, it ended up being 200px instead of the expected 204px

Customized CSS scrollbar within a specific div

The jQuery Animate feature springs to life with just a single click

How to retrieve video duration in Angular 2 before uploading the file

When the form is submitted, the text input vanishes and then the page is refreshed using AJAX technology

Apply a style to the div element that contains a TextInput component

troubles with compatibility between bootstrap.css and IE11

Can someone help me troubleshoot why my ASP.NET web service call is not working properly?

Prioritize the first child in Flexbox by truncating its text before the second

Ways to prevent ERR_INSUFFICIENT_RESOURCES when making AJAX requests

A continuous jQuery method for updating select option values

Pagination CSS may fail to function properly in Chrome after an AJAX call is returned

Error 404 encountered while attempting to access dist/js/login in Node.JS bootstrap

Latest FF 35 showing alert for blank field in HTML5 email input box

I am consistently finding a class in my program, but when I try to locate the same class in the HTML, it seems to be non-existent

Can the bottom border on an input textfield be removed specifically under the new character?

JS: Discovering an element's screen position consistently across various computers

Enhancing the appearance of CSS Tables

How to override an event in JavaScript when a specific value is entered