Sticky control panel

src/app/item-detail/item-detail.component.html

@@ -1,4 +1,4 @@
-<app-control-panel *ngIf="!isAnonymous">
+<app-control-panel *ngIf="!isAnonymous" shouldStick=true>
   <ul class="navbar-nav mr-auto">
     <li class="nav-item">
       <app-breadcrumb *ngIf="itemData.environment" [testName]="itemData.name"></app-breadcrumb>

src/app/shared/control-panel/control-panel.component.css

@@ -1,7 +1,7 @@
 #top-panel {
   margin-left: 10px;
   margin-right: 10px;
-  margin-top: 20px;
+  padding-top: 20px !important;
   border-radius: 0.2rem;
 }
 
@@ -13,3 +13,8 @@
   padding-bottom: 5px;
   padding-top: 5px;
 }
+
+.navbar-inverse {
+  background-color: #f0f1f4;
+  padding-bottom: 20px !important;
+}

src/app/shared/control-panel/control-panel.component.html

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-lg navbar-light py-1 content-container" id="top-panel">
+<nav class="navbar navbar-expand-lg navbar-light py-1 content-container" [ngClass]="{'sticky-top': shouldStick }" id="top-panel" (scroll)="onWindowScroll();">
   <button class="navbar-toggler text-primary" type="button" (click)="toggleNavbar()">
     <i class="fas fa-ellipsis-h"></i>
   </button>

src/app/shared/control-panel/control-panel.component.ts

@@ -1,16 +1,31 @@
-import { Component } from "@angular/core";
+import { Component, HostListener, Input } from "@angular/core";
 
 @Component({
-  selector: "app-control-panel",
-  templateUrl: "./control-panel.component.html",
-  styleUrls: ["./control-panel.component.css", "../../shared-styles.css"]
+  selector: 'app-control-panel',
+  templateUrl: './control-panel.component.html',
+  styleUrls: ['./control-panel.component.css', '../../shared-styles.css']
 })
 export class ControlPanelComponent {
 
+  @Input() shouldStick = false;
+
   navbarOpen = false;
 
   toggleNavbar() {
     this.navbarOpen = !this.navbarOpen;
   }
 
+  @HostListener('window:scroll', ['$event'])
+  onWindowScroll() {
+    if (!this.shouldStick) {
+      return
+    }
+    const element = document.querySelector("#top-panel") as HTMLElement;
+    if (window.pageYOffset > element.clientHeight) {
+      element.classList.add("navbar-inverse");
+    } else {
+      element.classList.remove("navbar-inverse");
+    }
+  }
+
 }