Parallax disrespecting pinned header

I’m working on a personal project for a fictional co-working space to put in my portfolio. I have added a header pinned to the top of the page that also changes colour once it gets past a certain point on the page.

However, I’ve added some parallax using jQuery and no matter what I’ve tried, the parallax overlaps my pinned navbar. I have tried setting the z-index as well as the position, but it doesn’t seem to have an effect. There is also a line in my html which mentions z-index, however when I try to adjust it there the parallax effect disappears completely. Any feedback would be a great help, thanks very much in advance. :grinning:

My relevant code is below.

index.html

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset="UTF-8">
    <link href="resources/styles.css" link rel="stylesheet" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="parallax.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="Coworking, London, Entrepreneur">
    <title>
    iWork - The Coworking Space
    </title>
</head>
<body>
<div class="home-image-container">
<header class="header" id="header">
<div class="title-nav-wrapper">
<div class="title-wrapper">
<h1 class="site-title">
    <a id="top">
        iWork
    </a>
</h1>
</div>
<!--MAIN NAVIGATION-->
<div id="desktopNav">
    <nav class="main-nav">
        <div class="nav-wrapper">
            <ul>
                <li>
                <a>
                    <span>ABOUT</span>
                </a>
            </li>
            <li>
                <a>
                    <span>COWORK</span>
                </a>
            </li>
            <li>
                <a>
                    <span>COMMUNITY</span>
                </a>
            </li>
            <li>
                <a>
                    <span>RENT</span>
                </a>
            </li>
            <li>
                <a>
                    <span>COURSES</span>
                </a>
            </li>
            <li>
                <a>
                    <span>
                        LOG-IN
                    </span>
                </a>
            </li>
            <li>
                <a>
                    <span>BOOK A TOUR</span>
                </a>
            </li>
            </ul>
        </div>
    </nav>
</div>
</div>
</header>
<!--ABOUT PAGE-->
<div class="page-description">
    <div class="inner-description-container">
<h1>A London Coworking Space</h1>
<br>
<p class="join-us">
    <a href="www.#.com">Join Our Community</a>
</p>
</div>
</div>
</div>

<div class="description">
    <h2>
        An environment to dream, create, and collaborate. 
    </h2>
    <br>
    <h3>
       iWork an industry leading coworking space, in the heart of London. Our members include entrepreneurs, start-ups, web developers, and digital nomads. 
       We're on a mission to create a community of like-minded go-getters. 
    </h3>
    <p class="tour">
        <a href="www.#.com">Book A Tour</a>
    </p>
</div>

<!--PARALLAX SECTION-->
<div class="container">
    <div class="parallax"> 
<!--LINE OF CODE SPECIFYING Z-INDEX-->
    <div class="parallax" data-parallax="scroll" data-z-index="1" data-image-src="resources/images/two-women.jpg">
    <p class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar felis nec sodales finibus. Quisque eget vehicula ante. Quisque pharetra ut erat ac lacinia. Nulla mauris mauris, convallis in vulputate dignissim, pulvinar porta tellus. Sed facilisis est sed tristique condimentum. Nunc at imperdiet ex, id bibendum mauris. Quisque interdum commodo vehicula. Sed in lacus nulla. In hac habitasse platea dictumst.

        Proin id tristique arcu. Nam et urna et nibh pellentesque maximus sed vitae neque. Vivamus mauris ex, ullamcorper et diam et, convallis mollis erat. Integer non est quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis leo urna. Nullam vitae placerat libero, sit amet lacinia quam. Duis volutpat mattis auctor.

        Quisque hendrerit quis elit aliquet condimentum. Mauris porttitor urna quis eros gravida interdum. Vivamus tincidunt nulla elit, sed fringilla justo rhoncus rhoncus. Quisque vitae arcu finibus nibh ultricies accumsan non ut ante. Donec cursus imperdiet sapien sit amet convallis. Suspendisse potenti. Nullam ut imperdiet nibh. Morbi eget aliquet arcu. Donec pellentesque efficitur dui. Mauris at tincidunt justo. Maecenas ut metus dictum, rhoncus tellus in, mollis nisl. Proin egestas imperdiet diam. Vivamus eleifend ex neque, dapibus pretium massa fermentum ac. Duis consectetur egestas orci aliquam bibendum.

        Sed feugiat volutpat sodales. Ut libero augue, iaculis non lectus eu, pellentesque accumsan sapien. Phasellus est ante, pharetra ac mi sit amet, pharetra pharetra erat. Ut ac pharetra libero. Mauris sodales tellus in mi rhoncus dictum. Integer molestie massa non dolor iaculis commodo. Vestibulum et ipsum nec leo venenatis consectetur.

        Nunc ut auctor tellus. Sed quis elementum nibh. Integer id ligula in dolor pretium finibus. Sed diam libero, sodales quis lorem vitae, gravida placerat odio. Duis commodo ipsum eget leo congue viverra. Nullam consequat, arcu et porttitor luctus, mi lectus efficitur augue, ac tempus dolor erat ac mi. Fusce sit amet nulla quam. Vestibulum at enim quam. Nunc quis neque lacus. Donec posuere erat at nunc facilisis, eget bibendum nisl semper. Donec rutrum justo eu tellus euismod laoreet. Mauris varius volutpat nunc, a viverra ex maximus vitae.</p>
    </div>
    </div>
    </div>

    
<script src="script.js" async></script>
</body>
</html>

body, html {
    height: 100%;
    font-family: 'Nanum Gothic', sans-serif;
}

html, body, h1, h2, h3, h4, h5, h6, div {
    padding: 0;
    border: 0;
    margin: 0;
  }


.home-image-container {
    background-image: url("images/bg.jpg");
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0;
    margin: 0px;  
    opacity: 0.9; 
    color: black; 
 }


header {
    box-sizing: border-box;
    position: fixed; 
    cursor: pointer;
    padding-left: 20px; 
    width: 100%;
    text-decoration: none;
    z-index: 999; 
    top: 0; 
    color: black; 
    background: transparent;
}

header.active {
    box-sizing: border-box;
    position: fixed; 
    cursor: pointer;
    padding-left: 20px; 
    width: 100%;
    text-decoration: none;
    z-index: 999; 
    top: 0; 
    color: white; 
    background: black; 
}


.title-nav-wrapper a:hover {
    opacity: 0.7; 
}

.main-nav ul li
 { 
     display: inline-block;
     margin: auto;
     list-style-type: none;
   
 }

 ul {
     display: flex;
     flex-wrap: wrap;
     float: right; 
     display: block;
  
 }

 li {
     padding-right: 20px; 
 }

 .title-wrapper {
     margin-top: 30px; 
 }

.container {
    max-width: 960px; 
    margin: 0 auto; 
    background:white; 
    font-size: 24px; 
    padding: 25px; 
    
}


.parallax {
    padding: 100px 35px; 
    min-height: 500px;
    background: transparent;

}

.info {
    z-index: 2; 
    position: relative; 
    color: white; 
}

script.js


const header = document.querySelector('.header');


window.onscroll = function() {
    var top = window.scrollY;
    console.log(top);
    if (top >= 56) {
      header.classList.add('active');
    } else {
        header.classList.remove('active');
    }
}

parallax.min.js

/*!
 * parallax.js v1.5.0 (http://pixelcog.github.io/parallax.js/)
 * @copyright 2016 PixelCog, Inc.
 * @license MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE)
 */
!function(t,i,e,s){function o(i,e){var h=this;"object"==typeof e&&(delete e.refresh,delete e.render,t.extend(this,e)),this.$element=t(i),!this.imageSrc&&this.$element.is("img")&&(this.imageSrc=this.$element.attr("src"));var r=(this.position+"").toLowerCase().match(/\S+/g)||[];if(r.length<1&&r.push("center"),1==r.length&&r.push(r[0]),"top"!=r[0]&&"bottom"!=r[0]&&"left"!=r[1]&&"right"!=r[1]||(r=[r[1],r[0]]),this.positionX!==s&&(r[0]=this.positionX.toLowerCase()),this.positionY!==s&&(r[1]=this.positionY.toLowerCase()),h.positionX=r[0],h.positionY=r[1],"left"!=this.positionX&&"right"!=this.positionX&&(isNaN(parseInt(this.positionX))?this.positionX="center":this.positionX=parseInt(this.positionX)),"top"!=this.positionY&&"bottom"!=this.positionY&&(isNaN(parseInt(this.positionY))?this.positionY="center":this.positionY=parseInt(this.positionY)),this.position=this.positionX+(isNaN(this.positionX)?"":"px")+" "+this.positionY+(isNaN(this.positionY)?"":"px"),navigator.userAgent.match(/(iPod|iPhone|iPad)/))return this.imageSrc&&this.iosFix&&!this.$element.is("img")&&this.$element.css({backgroundImage:"url("+this.imageSrc+")",backgroundSize:"cover",backgroundPosition:this.position}),this;if(navigator.userAgent.match(/(Android)/))return this.imageSrc&&this.androidFix&&!this.$element.is("img")&&this.$element.css({backgroundImage:"url("+this.imageSrc+")",backgroundSize:"cover",backgroundPosition:this.position}),this;this.$mirror=t("<div />").prependTo(this.mirrorContainer);var a=this.$element.find(">.parallax-slider"),n=!1;0==a.length?this.$slider=t("<img />").prependTo(this.$mirror):(this.$slider=a.prependTo(this.$mirror),n=!0),this.$mirror.addClass("parallax-mirror").css({visibility:"hidden",zIndex:this.zIndex,position:"fixed",top:0,left:0,overflow:"hidden"}),this.$slider.addClass("parallax-slider").one("load",function(){h.naturalHeight&&h.naturalWidth||(h.naturalHeight=this.naturalHeight||this.height||1,h.naturalWidth=this.naturalWidth||this.width||1),h.aspectRatio=h.naturalWidth/h.naturalHeight,o.isSetup||o.setup(),o.sliders.push(h),o.isFresh=!1,o.requestRender()}),n||(this.$slider[0].src=this.imageSrc),(this.naturalHeight&&this.naturalWidth||this.$slider[0].complete||a.length>0)&&this.$slider.trigger("load")}!function(){for(var t=0,e=["ms","moz","webkit","o"],s=0;s<e.length&&!i.requestAnimationFrame;++s)i.requestAnimationFrame=i[e[s]+"RequestAnimationFrame"],i.cancelAnimationFrame=i[e[s]+"CancelAnimationFrame"]||i[e[s]+"CancelRequestAnimationFrame"];i.requestAnimationFrame||(i.requestAnimationFrame=function(e){var s=(new Date).getTime(),o=Math.max(0,16-(s-t)),h=i.setTimeout(function(){e(s+o)},o);return t=s+o,h}),i.cancelAnimationFrame||(i.cancelAnimationFrame=function(t){clearTimeout(t)})}(),t.extend(o.prototype,{speed:.2,bleed:0,zIndex:-100,iosFix:!0,androidFix:!0,position:"center",overScrollFix:!1,mirrorContainer:"body",refresh:function(){this.boxWidth=this.$element.outerWidth(),this.boxHeight=this.$element.outerHeight()+2*this.bleed,this.boxOffsetTop=this.$element.offset().top-this.bleed,this.boxOffsetLeft=this.$element.offset().left,this.boxOffsetBottom=this.boxOffsetTop+this.boxHeight;var t,i=o.winHeight,e=o.docHeight,s=Math.min(this.boxOffsetTop,e-i),h=Math.max(this.boxOffsetTop+this.boxHeight-i,0),r=this.boxHeight+(s-h)*(1-this.speed)|0,a=(this.boxOffsetTop-s)*(1-this.speed)|0;r*this.aspectRatio>=this.boxWidth?(this.imageWidth=r*this.aspectRatio|0,this.imageHeight=r,this.offsetBaseTop=a,t=this.imageWidth-this.boxWidth,"left"==this.positionX?this.offsetLeft=0:"right"==this.positionX?this.offsetLeft=-t:isNaN(this.positionX)?this.offsetLeft=-t/2|0:this.offsetLeft=Math.max(this.positionX,-t)):(this.imageWidth=this.boxWidth,this.imageHeight=this.boxWidth/this.aspectRatio|0,this.offsetLeft=0,t=this.imageHeight-r,"top"==this.positionY?this.offsetBaseTop=a:"bottom"==this.positionY?this.offsetBaseTop=a-t:isNaN(this.positionY)?this.offsetBaseTop=a-t/2|0:this.offsetBaseTop=a+Math.max(this.positionY,-t))},render:function(){var t=o.scrollTop,i=o.scrollLeft,e=this.overScrollFix?o.overScroll:0,s=t+o.winHeight;this.boxOffsetBottom>t&&this.boxOffsetTop<=s?(this.visibility="visible",this.mirrorTop=this.boxOffsetTop-t,this.mirrorLeft=this.boxOffsetLeft-i,this.offsetTop=this.offsetBaseTop-this.mirrorTop*(1-this.speed)):this.visibility="hidden",this.$mirror.css({transform:"translate3d("+this.mirrorLeft+"px, "+(this.mirrorTop-e)+"px, 0px)",visibility:this.visibility,height:this.boxHeight,width:this.boxWidth}),this.$slider.css({transform:"translate3d("+this.offsetLeft+"px, "+this.offsetTop+"px, 0px)",position:"absolute",height:this.imageHeight,width:this.imageWidth,maxWidth:"none"})}}),t.extend(o,{scrollTop:0,scrollLeft:0,winHeight:0,winWidth:0,docHeight:1<<30,docWidth:1<<30,sliders:[],isReady:!1,isFresh:!1,isBusy:!1,setup:function(){function s(){if(p==i.pageYOffset)return i.requestAnimationFrame(s),!1;p=i.pageYOffset,h.render(),i.requestAnimationFrame(s)}if(!this.isReady){var h=this,r=t(e),a=t(i),n=function(){o.winHeight=a.height(),o.winWidth=a.width(),o.docHeight=r.height(),o.docWidth=r.width()},l=function(){var t=a.scrollTop(),i=o.docHeight-o.winHeight,e=o.docWidth-o.winWidth;o.scrollTop=Math.max(0,Math.min(i,t)),o.scrollLeft=Math.max(0,Math.min(e,a.scrollLeft())),o.overScroll=Math.max(t-i,Math.min(t,0))};a.on("resize.px.parallax load.px.parallax",function(){n(),h.refresh(),o.isFresh=!1,o.requestRender()}).on("scroll.px.parallax load.px.parallax",function(){l(),o.requestRender()}),n(),l(),this.isReady=!0;var p=-1;s()}},configure:function(i){"object"==typeof i&&(delete i.refresh,delete i.render,t.extend(this.prototype,i))},refresh:function(){t.each(this.sliders,function(){this.refresh()}),this.isFresh=!0},render:function(){this.isFresh||this.refresh(),t.each(this.sliders,function(){this.render()})},requestRender:function(){var t=this;t.render(),t.isBusy=!1},destroy:function(e){var s,h=t(e).data("px.parallax");for(h.$mirror.remove(),s=0;s<this.sliders.length;s+=1)this.sliders[s]==h&&this.sliders.splice(s,1);t(e).data("px.parallax",!1),0===this.sliders.length&&(t(i).off("scroll.px.parallax resize.px.parallax load.px.parallax"),this.isReady=!1,o.isSetup=!1)}});var h=t.fn.parallax;t.fn.parallax=function(s){return this.each(function(){var h=t(this),r="object"==typeof s&&s;this==i||this==e||h.is("body")?o.configure(r):h.data("px.parallax")?"object"==typeof s&&t.extend(h.data("px.parallax"),r):(r=t.extend({},h.data(),r),h.data("px.parallax",new o(this,r))),"string"==typeof s&&("destroy"==s?o.destroy(this):o[s]())})},t.fn.parallax.Constructor=o,t.fn.parallax.noConflict=function(){return t.fn.parallax=h,this},t(function(){t('[data-parallax="scroll"]').parallax()})}(jQuery,window,document);

It will be much easier to view your project if you put all of the code through codepen:

Also, I’m not sure if you have to use a parallax library-- You can just go here for how to make a parallax scrolling effect with only html and css.

I hope this project comes out succesfully.
Happy Coding.
– LeviathanProgramming