Fix for Issue#86

projects/demo/src/app/app.component.ts

@@ -1,19 +1,12 @@
 import { Component } from '@angular/core';
-import { JoyrideService } from 'ngx-joyride';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
+import { JoyrideService } from '../../../ngx-joyride/src/public-api';
 
 @Component({
     selector: 'demo-app',
     template: `
-        <nav class="toolbar"><a routerLink="">Home</a> <a routerLink="/about/you">About</a> <a routerLink="/info">Info</a></nav>
-        <div joyrideStep="firstStep" title="demoTour" text="Hi, Welcome to demo tour">phone</div>
-        <div><joyrideStep joyrideStep="ciao" [title]="'TITLE' | translate">ehila</joyrideStep></div>
-        <div>
-            <p>Paragraph 1</p>
-            <p>Paragraph 2</p>
-        </div>
-        <router-outlet></router-outlet>
+    <joyride-fix></joyride-fix>
     `,
     styleUrls: ['./app.component.sass']
 })

projects/demo/src/app/app.module.ts

@@ -1,11 +1,12 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { JoyrideModule } from 'ngx-joyride';
 import { InfoComponent } from './components/info.component';
 import { AboutComponent } from './components/about.component';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { TranslateModule } from '@ngx-translate/core';
+import { JoyRideFixComponent } from './components/joy-ride-fix.component';
+import { JoyrideModule } from '../../../ngx-joyride/src/public-api';
 
 @NgModule({
   imports: [
@@ -17,7 +18,8 @@ import { TranslateModule } from '@ngx-translate/core';
   declarations: [
     AppComponent,
     AboutComponent,
-    InfoComponent
+    InfoComponent,
+    JoyRideFixComponent
   ],
   bootstrap: [AppComponent]
 })

projects/demo/src/app/components/joy-ride-fix.component.html

@@ -0,0 +1,41 @@
+<div class="main-container">
+    <div class="content-container">
+    <div class="content-area">
+      <div class="header" joyrideStep="firstStep" title="demoTour" text="Hi, Welcome to demo tour">
+        <h3>JoyRide</h3>
+      </div>
+      <div class="section-container">
+        <div class="sub-heading">
+          <h4>
+            Custom Heading
+          </h4>
+        </div>
+        <div class="nav-bar">
+          <ul class="nav-list">
+            <li class="nav-item"><a href="javascript:void(0)" (click)="startTour()">Start Tour</a></li>
+            <li class="nav-item"><span>Nav2</span></li>
+            <li class="nav-item"><span>Nav3</span></li>
+            <li class="nav-item"><span>Nav4</span></li>
+          </ul>
+        </div>
+        <div class="sections">
+          <div class="section1" joyrideStep="secondStep" title="demoTour" text="Hi, Welcome to demo tour">
+            <div class="section-content">
+              Section 1
+            </div>
+          </div>
+          <div class="section2">
+            <div class="section-content">
+              Section 2
+            </div>
+          </div>
+        </div>
+        </div>
+      <div class="footer">
+        <div class="footer-content">
+          JoyRide Footer
+        </div>
+      </div>
+    </div>
+    </div>
+  </div>

projects/demo/src/app/components/joy-ride-fix.component.scss

@@ -0,0 +1,60 @@
+.main-container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    background: #fafafa;
+    .content-container {
+        display: flex;
+        flex: 1 1 auto;
+        min-height: 1px;
+        .content-area {
+            flex: 1 1 auto;
+            overflow-y: auto;
+            .header {
+                height: 50px;
+                z-index: 100;
+                position: fixed;
+                width: 100%;
+                background-color: #314351;
+                color: #fff;
+                text-align: center;
+                flex: 0 0 2.5rem;
+            }
+            .section-container {
+                display: block;
+                margin: 0 auto 60px;
+                max-width: 767px;
+                padding-left: 25px;
+                position: relative;
+                top: 60px;
+                min-height: 90%;
+                .sections {
+                    display: flex;
+                    .section1 {
+                        flex: 0 0 30%;
+                        height: 500px;
+                        background-color: #faebd7;
+                        // z-index: 101; // Uncomment this to undestand how it hides behind fixed elements
+                    }
+                    .section2 {
+                        flex: 0 0 70%;
+                        height: 500px;
+                        background-color: #f0f8ff;
+                    }
+                }
+            }
+            .footer {
+                background-color: #314351;
+                color: #fff;
+                text-align: center;
+                position: relative;
+                height: 100px;
+                width: 100%;
+                justify-content: center;
+                align-items: center;
+                overflow: hidden;
+                margin-top: 100px;
+            }
+        }
+    }
+}

projects/demo/src/app/components/joy-ride-fix.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { JoyrideService } from '../../../../ngx-joyride/src/public-api';
+
+@Component({
+  selector: 'joyride-fix',
+  templateUrl: './joy-ride-fix.component.html',
+  styleUrls: ['./joy-ride-fix.component.scss']
+})
+export class JoyRideFixComponent implements OnInit{
+  title = 'JoyRideIssue';
+  constructor(private joyride: JoyrideService) { }
+
+  ngOnInit(): void {
+  }
+
+  startTour() {
+    this.joyride.startTour({ 
+      steps: ['firstStep', 'secondStep'],
+      fixedHeader: '.header' // Added additional attribute to identify incase of fixed position elements
+    });
+  }
+}

projects/demo/src/app/home.module.ts

@@ -1,10 +1,10 @@
 import { NgModule } from '@angular/core';
 import { HomeComponent } from './components/home.component';
 import { HomeRoutingModule, PageAComponent, PageBComponent } from './components/home-routing.module';
-import { JoyrideModule } from 'ngx-joyride';
 import { CustomComponent } from './components/custom.component';
 import { CommonModule } from '@angular/common';
 import { JoyrideTranslatePipe } from './pipes/translate.pipe.component';
+import { JoyrideModule } from '../../../ngx-joyride/src/public-api';
 
 @NgModule({
   imports: [

projects/demo/src/styles.css

@@ -1 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
+body {
+    margin: 0 !important;
+}

projects/ngx-joyride/src/lib/models/joyride-options.class.ts

@@ -10,6 +10,7 @@ export class JoyrideOptions {
     showPrevButton?: boolean;
     customTexts?: CustomTexts;
     logsEnabled?: boolean;
+    fixedHeader?: string;
 }
 
 export class ICustomTexts {

projects/ngx-joyride/src/lib/services/document.service.ts

@@ -111,24 +111,46 @@ export class DocumentService implements IDocumentService {
         return 3;
     }
 
-    scrollIntoView(elementRef: ElementRef, isElementFixed: boolean): void {
+    // scrollIntoView(elementRef: ElementRef, isElementFixed: boolean, fixedHeaderHeight?: number): void {
+    //     const firstScrollableParent = this.getFirstScrollableParent(
+    //         elementRef.nativeElement
+    //     );
+    //     const top = isElementFixed
+    //         ? this.getElementFixedTop(elementRef)
+    //         : this.getElementAbsoluteTop(elementRef);
+    //     if (
+    //         firstScrollableParent !== this.DOMService.getNativeDocument().body
+    //     ) {
+    //         if (firstScrollableParent.scrollTo) {
+    //             firstScrollableParent.scrollTo(0, top - fixedHeaderHeight);
+    //         } else {
+    //             // IE 11 - Edge browsers
+    //             firstScrollableParent.scrollTop = top - fixedHeaderHeight;
+    //         }
+    //     } else {
+    //         this.DOMService.getNativeWindow().scrollTo(0, top - fixedHeaderHeight);
+    //     }
+    // }
+
+    scrollIntoView(elementRef: ElementRef, isElementFixed: boolean, fixedHeaderHeight?: number): void {
         const firstScrollableParent = this.getFirstScrollableParent(
             elementRef.nativeElement
         );
         const top = isElementFixed
             ? this.getElementFixedTop(elementRef)
-            : this.getElementAbsoluteTop(elementRef);
+            : this.firstScrollableParentScrollOffset(elementRef).y +  elementRef.nativeElement.getBoundingClientRect().top;
+            // : this.getElementAbsoluteTop(elementRef); // Returns incorrect values if body elem doesnt have scroll and some custom child elem of body has scrollbar
         if (
             firstScrollableParent !== this.DOMService.getNativeDocument().body
         ) {
             if (firstScrollableParent.scrollTo) {
-                firstScrollableParent.scrollTo(0, top - 150);
+                firstScrollableParent.scrollTo(0, top - fixedHeaderHeight);
             } else {
                 // IE 11 - Edge browsers
-                firstScrollableParent.scrollTop = top - 150;
+                firstScrollableParent.scrollTop = top - fixedHeaderHeight;
             }
         } else {
-            this.DOMService.getNativeWindow().scrollTo(0, top - 150);
+            this.DOMService.getNativeWindow().scrollTo(0, top - fixedHeaderHeight);
         }
     }
 
@@ -214,6 +236,20 @@ export class DocumentService implements IDocumentService {
         );
     }
 
+    private firstScrollableParentScrollOffset(elementRef?: ElementRef) {
+        if(elementRef) {
+            const firstScrollableParent = this.getFirstScrollableParent(
+                elementRef.nativeElement
+            );
+            if(firstScrollableParent) {
+                return {
+                    x: firstScrollableParent.scrollLeft,
+                    y: firstScrollableParent.scrollTop
+                }
+            }
+        }
+    }
+
     private getScrollOffsets() {
         const winReference = this.DOMService.getNativeWindow();
         const docReference = this.DOMService.getNativeDocument();

projects/ngx-joyride/src/lib/services/joyride-options.service.ts

@@ -42,6 +42,7 @@ export class JoyrideOptionsService implements IJoyrideOptionsService {
     private showPrevButton: boolean = true;
     private stepsOrder: string[] = [];
     private firstStep: string;
+    private fixedHeader: string;
     private waitingTime: number;
     private customTexts: ObservableCustomTexts;
 
@@ -53,6 +54,7 @@ export class JoyrideOptionsService implements IJoyrideOptionsService {
         this.showPrevButton = typeof options.showPrevButton !== 'undefined' ? options.showPrevButton : this.showPrevButton;
         this.themeColor = options.themeColor ? options.themeColor : this.themeColor;
         this.firstStep = options.startWith;
+        this.fixedHeader = options.fixedHeader;
         this.waitingTime = typeof options.waitingTime !== 'undefined' ? options.waitingTime : DEFAULT_TIMEOUT_BETWEEN_STEPS;
         typeof options.customTexts !== 'undefined' ? this.setCustomText(options.customTexts) : this.setCustomText(DEFAULT_TEXTS);
     }
@@ -77,6 +79,10 @@ export class JoyrideOptionsService implements IJoyrideOptionsService {
         return this.firstStep;
     }
 
+    getFixedHeader() {
+        return this.fixedHeader;
+    }
+
     getWaitingTime() {
         return this.waitingTime;
     }

projects/ngx-joyride/src/lib/services/joyride-step.service.ts

@@ -32,7 +32,7 @@ export class JoyrideStepService implements IJoyrideStepService {
     private winTopPosition: number = 0;
     private winBottomPosition: number = 0;
     private stepsObserver: ReplaySubject<JoyrideStepInfo> = new ReplaySubject<JoyrideStepInfo>();
-
+    private fixedHeaderHeight: number = 0;
     constructor(
         private readonly backDropService: JoyrideBackdropService,
         private readonly eventListener: EventListenerService,
@@ -123,6 +123,13 @@ export class JoyrideStepService implements IJoyrideStepService {
     private tryShowStep(actionType: StepActionType) {
         this.navigateToStepPage(actionType);
         const timeout = this.optionsService.getWaitingTime();
+        const fixedHeader = this.optionsService.getFixedHeader();
+        if(fixedHeader) {
+            const fixedHeaderEl =  this.DOMService.getNativeDocument().body.querySelector(fixedHeader);          
+            if(fixedHeaderEl) {
+                this.fixedHeaderHeight = fixedHeaderEl.getBoundingClientRect().height;
+            }
+        }
         if (timeout > 100) this.backDropService.remove();
         setTimeout(() => {
             try {
@@ -230,6 +237,10 @@ export class JoyrideStepService implements IJoyrideStepService {
         if (this.isElementBeyondOthers() === 2) {
             this.documentService.scrollToTheBottom(this.currentStep.targetViewContainer.element);
         }
+
+        if (this.isElementBeyondOthers() === 2 && this.documentService.isParentScrollable(this.currentStep.targetViewContainer.element)) { // Added to handle middle section & with parentscrollable
+            this.documentService.scrollIntoView(this.currentStep.targetViewContainer.element, this.currentStep.isElementOrAncestorFixed, this.fixedHeaderHeight);
+        }
         if (this.isElementBeyondOthers() === 1 && this.documentService.isParentScrollable(this.currentStep.targetViewContainer.element)) {
             this.documentService.scrollIntoView(this.currentStep.targetViewContainer.element, this.currentStep.isElementOrAncestorFixed);
         }