[UX] Approximate scroll when we click on sidebar menu title

[nodablock]

When we click on an element of the left side menu , the scroll brings it (approximately) to the content, sometimes at the wrong section.

For example, that link should bring to the video section, but it bring it to the middle of the content:

I think the correct behaviour would be to bring it exactly to the heading title?

[onweru]

I think the correct behaviour would be to bring it exactly to the heading title?

👍

[nodablock]

Figured out that temp solution with jquery (we can do without) by hiding the top menu bar.
That code also solves #7

_nav.sass:

.nav-up 
  top: -100px;

head.html

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>

index.js:

$(function() {

    var hasClicked = false;

    // hide bar when clicking on a menu item
    $(".toc_item a").on('click', function(event) {
      hasClicked = true;
      $('.nav_header').removeClass('nav-down').addClass('nav-up');
    });

      // Hide Header on on scroll down
      var didScroll;
      var lastScrollTop = 0;
      var delta = 50;
      var navbarHeight = $('.nav_header').outerHeight();
      $(window).scroll(function(event){
          didScroll = true;
      });

      setInterval(function() {
          if (didScroll) {
              hasScrolled();
              didScroll = false;
              hasClicked = false;
          }
      }, 500);

      function hasScrolled() {
          var st = $(this).scrollTop();

          // Make sure they scroll more than delta
          if(Math.abs(lastScrollTop - st) <= delta)
              return;

          // If they scrolled down and are past the navbar, add class .nav-up.
          // This is necessary so you never see what is "behind" the navbar.
          if (st > lastScrollTop && st > navbarHeight){
              // Scroll Down
              $('.nav_header').removeClass('nav-down').addClass('nav-up');
          } else {
              // Scroll Up
              if(st + $(window).height() < $(document).height()) {
                if (hasClicked != true) {
                  $('.nav_header').removeClass('nav-up').addClass('nav-down');
                }
              }
          }
          lastScrollTop = st;
      }