locomotive scroll under navbar

[L1nK4R1M]

Hello 👋

I have an issue with the scroll of my container. event if my navbar is outside of the container scroll. the containerscroll still scroll under the navbar and some content is hide. How can I add an offset to scroll just below the navbar without hiding the content.

here's the navbar :

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <a class="navbar-brand navbar-toggle" data-toggle="collapse" data-target="#nav" aria-expanded="false">
      <h2>HTMYH</h2>
    </a>
    <div class="navbar-collapse collapse" id="nav">
      <ul class="navbar-nav navbar-center">
        <li><a class="nav-item nav-link" routerLink="/home" routerLinkActive="active">Home</a></li>
        <li><a class="nav-item nav-link" routerLink="/prizes" routerLinkActive="active">Prizes</a></li>
        <li><a class="nav-item nav-link" routerLink="/play" routerLinkActive="active">Play</a></li>
        <!-- <li><a class="nav-item nav-link" routerLink="/users" routerLinkActive="active">currentUser.userName</a></li> -->
        <ng-container *ngIf="currentUser;  then loggedOut; else loggedIn"></ng-container>
      </ul>
    </div>
  </div>
</nav>
<home-page></home-page>

.navbar {
  // fixed the navbar to top
  position: fixed;
  z-index: 100;
  top: 0;
  height: auto;
  background-color: white;
  width: 100%;  
}

ngAfterViewInit() {
        //initialize Locomotive-scroll with
         const scroll = new LocomotiveScroll({
          el: document.querySelector('[data-scroll-container]'),
          smooth: true,
          smartphone: {
            smooth: true
          },
          tablet: {
            smooth: true
          }
        });
      }

I tried the scrollTo method but still doesn't work. I work on angular.

Is there a solution for that ?

Thank you 👊

[francescocortese]

I used for a scroll_top button to return to the top (outside the scroll-container) and don't need scrollTo GSAP plugin, just used locomotive and scrollTrigger (I don't know if it work without it):

$('.back_top').click(function(){
/// the var for locomotive and the method scrollTo("target");
  scroll.scrollTo("top");
  return false;
});

I think will be similar, to your case. You can also define a target (in this case "top" of page). From documentation: const target = document.querySelector('#js-target'); scroll.scrollTo(target);

I hope this can help you.

[L1nK4R1M]

Came out with a solution. I used Scrolltrigger to hide navbar when scrolling.