Sidebar not Active on Scroll - Jquery

Question

I'm having difficulty identifying the issue with my code but I am very close as the sidebar does become active momentarily but it does not remain active on scroll. I would like the sidebar to act as a ToC and become active when scrolling through the sections. Any help would be very appreciated. Thank you for your time and effort!

Here is the live site: https://www.matthewahn.xyz/cosmo

HTML

<div id="sidenav">
 <ul class="no-bullets">

<li>    <a href="#section-1">Cosmo</a> </li>
<li>    <a href="#section-2">Overview</a> </li>
<li>    <a href="#section-3">Challenge</a> </li>
<li>    <a href="#section-4">How Might We</a> </li>
<li>    <a href="#section-5">Solution</a> </li>
<li>    <a href="#section-6">Project Objective</a> </li>
<li>    <a href="#section-7">Research</a> </li>
<li>    <a href="#section-8">Target Users</a> </li>
<li>    <a href="#section-9">Machine Learning</a> </li>
<li>    <a href="#section-10">Project Design</a> </li>
<li>    <a href="#section-11">User Testing</a> </li>
<li>    <a href="#section-12">Prototype</a> </li>
<li>    <a href="#section-13">Reflections</a> </li>
<li>    <a href="#section-14">Future Improvements</a> </li>

 </ul>
</div>

CSS

ul.no-bullets {
      list-style-type: none;
}


#sidenav {

  right: 0;
  top: 50%;
  transform: translatey(-50%);
  position: fixed;
  z-index: 10000;
  width: 9.375em;

  align-items: center;
  background-color: #fff;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
 -webkit-box-shadow: rgba(0,0,0,0.1) 0 6px 10px;
 -moz-box-shadow: rgba(0,0,0,0.1) 0 6px 10px;
 box-shadow: rgba(0,0,0,0.1) 0 6px 10px;

  padding: 1.5em;
  overflow-x: hidden;
}

#sidenav a {
  
  text-align: right;
  padding-top: 1.2em;
  text-decoration: none;
  font-size: 0.9em;
  color: #ccc;
  display: block;
      transition: all 100ms ease-in-out;
}

#sidenav ul li a.active {
  color: #FF0000;
}

#sidenav a:hover, 
#sidenav a:focus,  {
  color: #000;
}

JS & Jquery

$(document).ready(function () {
    $(document).on("scroll", onScroll);
    
    //smoothscroll
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");
        
        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');
      
        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});



    function onScroll(event){
        var scrollPos = $(document).scrollTop();
        $('#sidenav a').each(function () {
            var currLink = $(this);
            var refElement = $(currLink.attr("href"));
            if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
                $('#sidenav ul li a').removeClass("active");
                currLink.addClass("active");
            }
            else{
                currLink.removeClass("active");
            }
        });
    }

Problem is in the `if (refElement.position().top <= scrollPos` line — Abin Thaha, Jul 08 '21 at 04:17
When I checked, the position function does not returns the value as you are expecting — Abin Thaha, Jul 08 '21 at 04:18
I see. Thank you for checking, any further recommendations would be very appreciated. I will try my best to edit the code. — Matthew Ahn, Jul 08 '21 at 04:24

score 0 · Answer 1 · answered Jul 08 '21 at 04:40

0

From what I understood is:

In the line checking the scroll position with refElement position

if (refElement.position().top <= scrollPos ...etc

What exactly you needs to do is to check the offset instead of the position. Because, from the link, the position is relative to the offset parent while offset is relative to the document.

In the site, what I found out is that the position().top is almost always returning same value. Can you replace using offset and check?

answered Jul 08 '21 at 04:40

Abin Thaha

4,493
3
13
41

I made the change but there is no difference. It still functions in the same fashion without any change. I'm sorry, I will try to update with a jsfiddle asap for convenience. – Matthew Ahn Jul 08 '21 at 04:52
Another problem is your `refElement.height()` is always returning 0. So `refElement.offset().top + refElement.height()` will never be greater than the scrollPos – Abin Thaha Jul 08 '21 at 05:09

Sidebar not Active on Scroll - Jquery

1 Answers1