-1

I've been googling about this and came across this solution:

$(function() {
    $(window).on("scroll", function() {
        if($(window).scrollTop() > 50) {
            $(".header").addClass("active");
        } else {
            //remove the background property so it comes transparent again
           $(".header").removeClass("active");
        }
    });
});

Here's the CSS:

header{
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent;
    height: 70px;
    align-items: center;
    justify-content: space-between;
}

.active{
    background-color: lightgray;
}

And the HTML:

<body>

    <header>

        <a href="#" class="logo">
            <h3>
                Logo will go here
            </h3>
        </a>

        <div class="header-links">
            <a id="home-link" href="#home">Home</a>
            <a id="portfolio-link" href="#portfolio">Portfolio</a>
            <a id="about-link" href="#about">About me</a>
            <a id="contact-link" href="#contact">Contact</a>
        </div>

    </header>

And at the end of the body in my html is:

    <script src="{{ asset('js/script.js') }}"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</body>

The browser Dev Tools console show this error 3 times:

Uncaught ReferenceError: $ is not defined

What I need is for the Header to change into a new background color after the user scrolls the screen down some pixels. I serached online and mostly found the same fix which is this presented above, but for some reason it just don't work, my header never changes the background color. Any ideas why?

IGP
  • 14,160
  • 4
  • 26
  • 43
Gustavo Araújo
  • 55
  • 9
  • What errors are you seeing on your browser' dev tools console? $(".header") does not look right. – A Haworth Feb 27 '21 at 21:21
  • Sorry, should have added that. Gonna edit the question and add the errors – Gustavo Araújo Feb 27 '21 at 21:23
  • Does this answer your question? [Uncaught ReferenceError: $ is not defined?](https://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined) – miken32 Feb 27 '21 at 21:42

1 Answers1

0

If asset('js/script.js') is where you keep your $(function () { ... }) code, then it should be loaded after jquery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="{{ asset('js/script.js') }}"></script>

I tried this code and it worked for me. The problem was the css.

$(window).on("scroll", function() {
    if($(window).scrollTop() > 50) {
        $(".header").addClass("active");
    } else {
       //remove the background property so it comes transparent again
       $(".header").removeClass("active");
    }
});

Add !important to your .active class and it should work.

.active{
    background-color: lightgray !important;
}
IGP
  • 14,160
  • 4
  • 26
  • 43
  • Changed the order and the Browser Dev Tools show no more of the "Uncaught ReferenceError: $ is not defined" But still, nothing happens, could it be that the JavaScript is written wrong? – Gustavo Araújo Feb 27 '21 at 22:30
  • Probably.`$` is defined by jquery so the `$ is not defined` error meant jquery wasn't loaded. – IGP Feb 27 '21 at 22:36