导航后的div当动画进入视野时，div淡入导航的一半

Question

I have this HTML Markup: Here is my codepen: https://codepen.io/enavu/pen/WzevNm

<div id="close">
<div class="nav">
        <img src="https://i.imgur.com/gxDHDbG.png" alt="gb" class="centered">
        <div class="centered soon">COMING SOON</div>
        <a href="index.html" class="nav-logo  link-brand" data-text="">
        <span class="link-brand-inner">TITLE</span>
        <p class="nav-slogan">SubTitle</p>
        </a>
        <span class="nav-top-line"></span>
        <div class="nav-item nav-work">
            <a href="gallery.html">
            <span class="link-brand-inner">Gallery TopRight</span>
            </a>
        </div>
        <div class="mid-nav">
            <div class="nav-about">
                <span class="nav-about-line"></span>
                <span class="link-brand-inner">Sideways left middle Text</span>
            </div>
        </div>
    </div>
    <div class="" id="sliderContainer">
        <div id="pediChair" class="slider-display-none">
            <img src="assets/photos/image1.jpg">

        </div>
        <div id="maniTable" class="slider-display-none">
            <img src="assets/photos/image2.jpg">

        </div>
        <div id="mnstrmGear" class="slider-display-none">
        <img src="assets/photos/image3.jpg">

        </div>

</div>
</div>

When I try to animate the img , #pediChair in and the "Sideways left middle Text", "COMING SOON", and the first image reloads with the #pediChair jquery animation. I want the nav to stay fixed not to do anything but only the text of TITLE, Subtitle, and Gallery TopRight stay fixed and doesn't disappear and reload while the other does when the #pedichair animates into opacity 1.

My jquery method is like this:

setTimeout(resetCSS, 6800);

function resetCSS() {
    $('#close').fadeIn("slow", function(){
        sliderLoop();
    });
}

function sliderLoop(){
    $('#pediChair').animate({opacity: 1}, 3000);
}

Here is my css:

.nav-logo {
    position: absolute;
    z-index: 100;
    left: 24px;
    top: 20px;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 22px;
    font-size: 1.57143rem;
    line-height: 1
}
.slider-display-none {
    opacity:0;
}
.nav-slogan {
    position: absolute;
    font-size: 10px;
    font-size: 0.71429rem;
    line-height: 1;
    letter-spacing: 0.11em;
    left: 0;
    top: 24px;
    font-weight: 700;
    text-transform: uppercase
}


.nav-top-line {
    position: absolute;
    top: -2px;
    left: 50%;
    width: 2px;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    color: white;
    background-color: currentColor;
    pointer-events: none;
    height: 30px;
}

.nav-work {
    top: 25px;
    right: 50px;
}

.nav-item {
    position: absolute;
    z-index: 100;
    text-transform: uppercase;
    font-size: 11px;
    font-size: 0.78571rem;
    line-height: 2.27273;
    letter-spacing: 0.11em;
    font-weight: 700;
}

.link-brand-inner {
    color: white
}

.link-brand {
    display: inline-block;
    position: relative;
    white-space: nowrap;
}

.nav-about {
    position: relative;
    transform: rotate(270deg);
}

.nav-about-line {
    position: absolute;
    top: -10px;
    left: 50%;
    width: 2px;
    color: white;
    background-color: currentColor;
    height: 10px;
}

.mid-nav {
    position: absolute;
    top: 50%;
}

I tried to use z-index for the class nav and id sliderContainer but it still does the same effect.

Answer 1

I've simulated this case and the nav stay fixed while pediChair appears.

Also, I assume you want to have <div id="close"> not displayed since you're using $('#close').fadeIn() to make it appear.

To fix the issue with the controls disappearing and reappearing again when using the animation with opacity 1, you have to use z-index like in this example:

.nav > * {
  z-index: 1;
}

Check the code here: https://jsfiddle.net/737z3ebc/11/