CODEWITHSUNDEEP
htmlcssangularnavbar
Harish
Harish

Reputation: 61

Navbar transparent until scroll on Angular

I am trying to make my navbar transparent. Upon scroll, I would like the navbar to have a solid background color. I have tried the various methods stated in other SO answers, but they mainly apply to javascript. I have tried using CSS properties such as background-color but to no avail. I believe that since scroll is used to trigger the color change, I might need to utilize jQuery?

header.html

<nav class="navbar navbar-expand-md  sticky-top bg-light navbar-light">
  <a class="navbar-brand">App Name</a>
    <div class="container-fluid justify-content-end">
      <div class="navbar-header">
       <div class="collapse navbar-collapse">
          <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
            <li><a class="nav-link" routerLink="/home" routerLinkActive="active">Home</a></li>
            <li><a class="nav-link" >About Us</a></li>
            <li><a class="nav-link" >Contact Us</a></li>
            <li><a class="nav-link" >Account</a></li>
          </ul>
       </div>
      </div>
    </div>
  </nav>

Upvotes: 0

Views: 1667

Answers (1)

Gabriel George
Gabriel George

Reputation: 124

I was planning to put it in a comment, but I can't since I don't have enough reputation so I'll just share it here.

Someone shared this on Twitter, however I forgot who did it. https://stackblitz.com/edit/angular-sticky-disappearing-header

Based on your description, that link might provide the behaviour you actually intended to have. You definitely don't need jQuery just to get the scrolling event since you can use fromEvent(window, "scroll")...

You just need to adjust the sticky.directive.ts and the put the necessary styling in styles.scss.

EDIT: adding code snippet from the StackBlitz

    fromEvent(windowRef, "scroll")
      .pipe(
        map(() => windowRef.scrollY),
        pairwise(),
        map(([prev, next]) => next < THRESHOLD || prev > next),
        distinctUntilChanged(),
        startWith(true),
        takeUntil(destroy$)
      )
      .subscribe(stuck => {
        renderer.setAttribute(nativeElement, "data-stuck", String(stuck));
      });

Upvotes: 2

Related Questions