Scrollspy Effect Stopped Working

February 27, 2023 Post a Comment

The scrollspy effect was working fine, but suddenly it stopped working. I mean the active element of the menu is identified while scrolling the onepage site, when the href links ar

Solution 1:

var cur = scrollItems!=null?scrollItems.map(...):null;

After this line cur is either something or null. If it's null, then you can't index it like and array, or for that matter get its length with cur.length.

You haven't specified the error, but I bet it's saying "TypeError: cur is null". The solution depends on what you actually want your code to do, but I'd suggest wrapping the remainder of the function in

if (cur) {
...
}

Solution 2:

I just wrote a custom scroll-spy script, if you wish.

Check the DEMO http://jsfiddle.net/yeyene/L4Gpq/

No need scrollspy plugin anymore and you only need to add in below;

1) target to your navi link.

2) Same class to your DIVs and id: same as your target of navi.

HTML

<nav>
    <ul>
        <li><a target="main">Home</a></li>
        <li><a target="story">Our Story</a></li>
        <li><a target="work">Our Work</a></li>
        <li><a target="our-news">Our News</a></li>
        <li><a target="contact">Contact Us</a></li>
    </ul>
</nav>
<div id="main" class="content">main</div>
<div id="story" class="content">story</div>
<div id="work" class="content">work</div>
<div id="our-news" class="content">our-news</div>
<div id="contact" class="content">contact</div>

JQUERY

$('nav li a').click(function () {
    var id = $(this).attr('target');
    $('html, body').stop().animate({
        scrollTop: $('#'+id).offset().top
    }, 500);
});

$(window).scroll(function() {   
    var myArray = new Array();
    $('div.content').each(function() {
        myArray.push($(this).offset().top);
    });
    for( var i=0; i<= myArray.length; i++){
        if($(this).scrollTop() >= myArray[i]){
            $('nav a').removeClass('active');
            $('nav a').eq(i).addClass('active');
        }
    }
});

CSS

li {
    float:left;
    margin-right:10px;
    list-style:none;
    text-decoration:none;
}
li a {
    cursor:pointer;
    text-decoration:none;
    z-index:11;
    padding:0 5px;
}
li a.active {
    background:red;
    color:#fff;
}
.content {
    float:left;
    width:90%;
    padding:45% 5%;
    background:#dfdfdf;
    margin-bottom:10px;
}
nav {
    position:fixed;
    width:100%;
    padding:0 0 10px 0;
    top:0;
    left:0;
    z-index:10;
    background:green;
}

Solution 3:

var item = $($(this).attr("href")); in your code was creating problem because when you write href="#id" it is var item = $(#id); but when you write href="/home#id" it becomes var item = $(/home#id); which is incorrect.I fixed it:

scrollItems = menuItems.map(function(){
  var indexItm = $(this).attr('href').indexOf('#');
  var str = $(this).attr('href').substring(indexItm);
  var item = $(str);
  if (item.length) { return item; }
});

Another change filter("[href*=#"+id+"]") which will check for string #id within href even in href contains any text before #:

Edited line:

menuItems
  .parent().removeClass("active")
  .end().filter("[href*=#"+id+"]").parent().addClass("active");

Fiddle were only foo is given href="/home#foo"

Note : the above fiddle will require a text along with # for Top href also.Otherwise it will set .active to all menu items:

<a href="#top">Top</a>
. 
. 
. 
<a id="top">top</a>

Html5 Learning