滚动到全色时的透明标题 - 导航叠加问题

Question

Currently my site has a transparent navbar when on scroll will change to full colour. The issue i am having is that the navbar also switches colour when the page is scrolled on the fullscreen navigation.

How can i stop the navbar switching colour when the fullscreen navigation is open? Would i need to change me JS?

 $(document).ready(function() { $(".menu-btn a").click(function() { $(".overlay").fadeToggle(200); $(this).toggleClass('btn-open').toggleClass('btn-close'); }); $('.overlay').on('click', function() { $(".overlay").fadeToggle(200); $(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close'); }); $('.menu a').on('click', function() { $(".overlay").fadeToggle(200); $(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close'); }); }); $(document).ready(function() { $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll > 100) { $(".navbar").css("background-color", "#dedede"); } else { $(".navbar").css("background-color", "transparent"); } }) });

 body { background: black; } .menu-btn { z-index: 999; display: inline; font-size: 32px; } .menu-btn a { display: inline-block; text-decoration: none; /* safari hack */ } .btn-open:after { color: #fff; content: "\\f394"; font-family: "Ionicons"; -webkit-transition: all .2s linear 0s; -moz-transition: all .2s linear 0s; -o-transition: all .2s linear 0s; transition-property: all .2s linear 0s; } .btn-open:hover:after { color: #ffffff; } .btn-close:after { color: #fff; content: "\\f2d7"; font-family: "Ionicons"; -webkit-transition: all .2s linear 0s; -moz-transition: all .2s linear 0s; -o-transition: all .2s linear 0s; transition-property: all .2s linear 0s; } .btn-close:hover:after { color: #ffffff; } /* OVERLAY */ .overlay { position: fixed; top: 0; z-index: 99; display: none; overflow: auto; width: 100%; height: 100%; background: rgba(209, 180, 0, 0.96); } .overlay .menu { margin: 15% auto; width: 80%; } .overlay .menu ul { margin: 0; padding: 0; width: 100%; } .overlay .menu ul li { float: left; padding: 6px 0 0 0; width: 50%; list-style: none; text-align: left; text-transform: uppercase; } .overlay .menu ul li#social { width: 100%; margin-top: 50px; } .overlay .menu ul li a { color: #d1b400; font-weight: 300; font-size: 20px; font-family: 'Old Standard TT', serif; } .overlay .menu ul li#social a {} .overlay .menu ul ul { margin-top: 20px; } .overlay .menu ul ul li { position: relative; float: none; margin: 0; width: 100%; border: 0; } .overlay .menu ul ul li a { color: #fff; text-transform: capitalize; font-weight: 300; font-size: 30px; } .overlay .menu ul ul li a:hover { color: #000000; } /* RESPONSIVE */ @media screen and (max-width: 768px) { .overlay .menu ul li { float: none; margin-bottom: 25px; width: 100%; } .overlay .menu ul li:last-child { border: 0; } .overlay .menu ul ul { margin-top: 20px; } .menu-btn { right: 25px; } } .allexamples { position: absolute; bottom: 0; font-size: 18px; font-weight: bold; width: 100%; text-align: center; background: #e9e9e9; padding: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #333; position: fixed; } .menu-social { display: inline-block; margin: 0 .4em; } .menu-social a { width: 44px; height: 44px; padding: 0; background-image: url("../img/cd-socials.svg"); background-repeat: no-repeat; /* image replacement */ overflow: hidden; text-indent: 100%; white-space: nowrap; } .menu-social .menu-facebook a { background-position: 0 0; } .menu-social .menu-instagram a { background-position: -44px 0; } .menu-social .menu-dribbble a { background-position: -88px 0; } .menu-social .menu-twitter a { background-position: -132px 0; } .overlay .menu ul ul li.description { padding: 0px 0 10px 0px; } .overlay .menu ul ul li.description span { color: #000000; font-size: 13px; font-weight: 300; text-transform: none; } p.tel, p.email { margin: 0 0 3px 0; } p.tel a { color: #fff!important; font-weight: 300!important; font-size: 20px!important; letter-spacing: 1px; } p.email a { color: #fff!important; font-weight: 300!important; font-size: 20px!important; text-transform: none; } .menu-btn a span { font-size: 18px; color: #ffffff; line-height: 18px; font-weight: 600; position: relative; top: -5px; right: 5px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <header> <nav class="navbar fixed-top"> <div class="container"> <a class="navbar-brand" href="#"> <img src="img/pb-white.png" width="30" height="30" alt=""> </a> <span class="navbar-text"> <div class="menu-btn"> <a class="btn-open" href="javascript:void(0)"> <span>MENU</span> </a> </div> </span> </div> </nav> </header> <div class="overlay"> <div class="menu"> <div class="container"> <ul> <li> <ul> <li><a href="#">Branding</a></li> <li class="description"><span>Brand Development, Logos, Point, Point</span></li> <li><a href="#">Digital</a></li> <li class="description"><span>Website Design, Website Development, Point, Point</span></li> <li><a href="#">Print</a></li> <li class="description"><span>Business Cards, Leaflets, Point, Point</span></li> <li><a href="#">Packaging</a></li> <li class="description"><span>Point, Point, Point, Point</span></li> <li><a href="#">Infographics</a></li> <li class="description"><span>Point, Point, Point, Point</span></li> </ul> </li> <li> <ul> <li><a href="#">About</a></li> <li class="description"><span>About Company</span></li> <li><a href="#">Work</a></li> <li class="description"><span>Examples & Case Studies of our work</span></li> <li><a href="#">Contact</a></li> <li class="description"><span>Get in touch with us to get your project started</span></li> </ul> </li> <li id="social"> <ul class="contact"> <p class="email"><a href="mailto:info@company.com">info@company.com</a></p> <p class="tel"><a href="tel:01231212312">01234 566545</a></p> </ul> </li> </ul> </div> </div> </div> <div style="height:2000px;"></div>

https://codepen.io/whitinggg/pen/bLzxGG

Answer 1

You can stop the navbar switching color when the fullscreen navigation by small editing in your script like this

change your script like this

$(document).ready(function () {

    $(".menu-btn a").click(function () {
        var scroll = $(window).scrollTop();
        $(".overlay").fadeToggle(200);
        $(this).toggleClass('btn-open').toggleClass('btn-close');

        if( $(this).hasClass('btn-close') ) { 
            $(".navbar").css("background-color", "transparent");
        } 
        else if( scroll > 100) {
            $(".navbar").css("background-color", "#dedede");
        }
    });

    $('.overlay').on('click', function () {
        $(".overlay").fadeToggle(200);
        $(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
    });

    $('.menu a').on('click', function () {
        $(".overlay").fadeToggle(200);
        $(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
    });

});

$(document).ready(function() {
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
        if (scroll > 100) {
            if($('.overlay:visible').length == 0) {
                $(".navbar").css("background-color", "#dedede");
            }
        } else {
            $(".navbar").css("background-color", "transparent");
        }
    });
});

Answer 2

You may consider adding an !important to the background style in order to always keep it transparent:

.navbar.fixed-top {
   background:transparent!important;
}