I want to fade in a navbar as soon as it comes into view and simultaneously fade out another navbar

Question

I want to fade in a navbar as soon as it comes into view and simultaneously fade out another navbar

46 Views Asked by Anthony Brown At 29 June 2023 at 04:24

I would like to make the nav with the id "topnav" fade in as soon as it would come into view (if it were visible the whole time). While this happens, I would like to have the nav with the id "hero-nav" fade out simultaneously.

I do not know a lick of JavaScript and honestly I am just looking for someone to come up with a quick solution.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Fonts -->

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">

    <!-- Icons -->

    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />

    <!-- Stylesheets -->

    <link href="./resources/css/index-style.css" rel="stylesheet">

    <!-- Script -->

    <script type="text/javascript" src="index.js"></script>

    <title>Hood Electric</title>
</head>
<body>
    <main>
        <section id="hero">
        <header>
                <div id="hero-logo">
                    <h1>LOGO</p>
                </div>
                <h4><em>"Quality work, done right."</em></h4>
        </header>
        <nav id="hero-nav">
            <ul>
                <li><a href="#">Residential</a></li>
                <li><a href="#">Commercial</a></li>
                <li><a href="#">Industrial</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
        </section>
        <article class="testimonies-container">
            <div class="testimonies-div">
            <h2 class="testimonies-text"><em>"The pink shutter shades had me a little concerned at first, but Chris is a very talented electrician."</em></h2>
            <h4 class="testimonies-text">-John Doe</h4>
            </div>
        </article>
        <nav id="topnav">
            <div id="nav-logo">
            <a href="#hero">
                    <h3>LOGO</h3>
            </a>
            </div>
            <a href="#Residential">Residential</a>
            <a href="#Commercial">Commercial</a><a href="#Industrial">Industrial</a><a href="#About">About</a><a href="#Contact">Contact</a>
        </nav>
        <div id="big-pink-div"></div>
    </main>

</body>
</html>

CSS:

/*

COLORS:

Orange #e76000
Gray #585858
Active link gray #585858


*/

/*Global Styles*/

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
    overflow-x: hidden;
}

ul {
    list-style-type: none;
}


/*Main jumbotron*/

#hero {
    background-image: url("../images/hood-electric-background.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 95%;
    width: 100vw;
    height: 100vh;
    text-align: center;



    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

#hero-logo {
    background-color: yellow;
    opacity: 70%;
    font-size: 2rem;
    width: fit-content;
    margin: 0 auto;
    
}

header {
    margin-top: auto;
}

header h4 {
    font-size: 1.25rem;
    color: #e76000;
    font-weight: 400;
}

#hero-nav {
    width: 80%;
    margin: auto;
    margin-bottom: 5vh;
}

#hero-nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;

}

li {
    margin: 5px 10px;
}

a{
    text-decoration: none;
    font-weight: lighter;
    color: #fff;
    /* background-color:rgba(72, 72, 72, 0.212); */
    /* border-radius: 0.625em;
    padding: 4%; */
    font-size: 1.25em;
}

a:hover{
    color:#e76000;
}

a:active {
    color: #adadad;
}

/* Testimonies */

.testimonies-container {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100vw;

    background-color: #858585;
    color: #373737;
}

.testimonies-div {
    text-align: center;
    margin: 30px;
    border: 2px solid #373737;
    border-radius: 8px;
}

.testimonies-text {
    margin: 10px 5px;
}

/* #testimonies ul {
    color:#000000;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

#testimonies ul li {

    width: 175px;
    margin: 0;
    text-align: center;
    margin: 1vh 2vw;
} */

@media screen and (max-width: 600px) {
    #topnav {
        display: none;
    }
}

@media screen and (min-width: 601px) {

    #topnav {
        background-color: rgb(63, 63, 63);
        width: 100%;
        height: 8vh;
        display: flex;
        justify-content: space-evenly;
        overflow: hidden;
        position: sticky;
        top: 0;
        z-index: 10;
        
    }
    
    #nav-logo {
        background-color: rgba(255, 255, 0, 0.476);
        margin-right: auto;
        width: fit-content;
        align-self: center;
    }
    
    #topnav a {
        margin: auto 1.5vw;
        
    }

    #big-pink-div {
        width: 100vw;
        height: 8000px;
        background-color: pink;
    }
}

I am attempting to do something that requires JavaScript knowledge with zero JavaScript knowledge (not that far along yet), don't have time to learn in time to finish this project.

Original Q&A

There are 1 best solutions below

**PRATHEESH PC** · Answer 1 · 2023-06-29T04:40:13.467000

we could have to calculate the scroll position and set the fade in/out to the topnav and hero-nav.

<script>
   
    window.onscroll = function() {
        var topNav  = document.getElementById("topnav");
        var heroNav = document.getElementById("hero-nav");

        var topNavOffset = topNav.offsetTop;

        var scrollPos = window.pageYOffset || document.documentElement.scrollTop;

        if (scrollPos >= topNavOffset) {
            topNav.style.opacity = 1; // fade in 
            topNav.style.transition = "opacity 0.5s ease";
            
            heroNav.style.opacity = 0; // fadeout
            heroNav.style.transition = "opacity 0.5s ease";
        } else {
            topNav.style.opacity = 0; // fade in
            topNav.style.transition = "opacity 0.5s ease";
            
            heroNav.style.opacity = 1; // fadeout
            heroNav.style.transition = "opacity 0.5s ease";
        }
    }
</script>

References:

I want to fade in a navbar as soon as it comes into view and simultaneously fade out another navbar

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in FADEIN

Related Questions in FADE

Trending Questions

Popular # Hahtags

Popular Questions