Vfrdtyky

as other here I try to modify the navbar during scrolling down. I read this question:

Changing nav-bar color after scrolling?

Transition in Navbar when Scroll Down

Bootstrap navbar change color to the scroll

I can't make it work on my website, I don't understand the issue:

HTML:

<!-- Navbar -->

<nav class="navbar justify-content-center navbar-expand-sm navbar-dark fixed-top navbar-custom">

    <!-- Menu Links -->

    <ul class="navbar-nav" >

        <li class="nav-item">

          <a class="nav-link" href="#">Services</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="#">Portfolio</a>

        </li>

            <!-- Wanted Logo -->

        <a class="navbar-brand" href="#">

        <img src="img/logo-light.png" alt="wanted_logo" style="width: 3vw;">

        </a>

        <li class="nav-item">

          <a class="nav-link" href="#">About us</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="#">Contact</a>

        </li>

    </ul>

</nav>

<!-- End Navbar -->

CSS:

.navbar-custom {

    background-color: rgba(0,0,0,0.5);

}



.navbar-custom ul li{

    text-transform: uppercase;

    font-size: 14px;

    color: #fff;

    padding-top: 34px;



}



.navbar-custom img{

    margin-left: 20px;

    margin-right: 7px;

}



.navbar-custom.scrolled {

    background-color: red !important;

    transition: background-color 200ms linear;

}

JS:

<script>$(function () {

  $(document).scroll(function () {

    var $nav = $(".navbar-custom");

    $nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());

  });

});

</script>

From my understanding when scrolling down further than the size of the navbar it should change color.

I though it could be a issue because the height of the navbar is not explicitly defined here so I tried adding:

CSS

.navbar-custom{

    background-color: rgba(0,0,0,0.5);

    height: 100px;

}

It still didn't work, so I tried also to use another version of the JS proposed here:Changing nav-bar color after scrolling?

JS:

<script type="text/javascript">

    $(document).ready(function(){

      $(window).scroll(function() {

        if ($(document).scrollTop() > 100) {

          $(".navbar-custom").css("background-color", "#f8f8f8");

        } else {

          $(".navbar-custom").css("background-color", "blue");

        }

      });

    });

    </script>

Same result nothing changes.

I am new using JS what doesn't work here ?

It's because you're using inconsistent scrolling. You have

$(window).scroll(function() {...});

However you're checking it with

if ($(document).scrollTop() > 100) {...}

And you also have:

$(document).ready(function() {...});

Make these all either $(window) or $(document), and it will work.

Finally, I made it work using this (as part of the w3 back-to-top button tutorial):

JS:

<script>

    window.onscroll = function() {scrollFunction()};



    function scrollFunction() {

        var $nav = $(".navbar-custom");



    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 50) {

        $nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());

    }

    }

</script>

Link to the w3school back to top button: https://www.w3schools.com/howto/howto_js_scroll_to_top.asp

Thank you