Bloc (with a navigation bar) that becomes opaque when scrolling

I Need Help
1

Hello

I’m trying to improve my website with a lack of knowledge in code.
I have for the moment (with the help of @PeteSharp, THANK YOU) managed to make some modifications on the size of my logo when scrolling. It works very well. Now I would like my Navbar bloc (only the background color) to become opaque when scrolling (from .7 to 1 for example).
The code I put in the footer of my page is the following:
Capture d’écran 2021-01-15 à 12.02.19

What line do I need to add for this to work?

Thank you for your precious help?

2

After a long search and many tries, I finally found it. It works very well and the result is what I wanted. For those who are interested the code is as follows:
Capture d’écran 2021-01-17 à 10.23.12

You can see the result on my website: www.lemoulinduboisset.com

Have a good day

4 Likes
3

Great job! That looks fantastic!

4

Thank you
I do my best

5

Hi Pat, is this still the code you are using for this?

Best wishes,

Will

6

Hello,

Yes. I use this code.

7

Thanks. I’ve got it working too and pasted below for anyone else who needs it.

Ensure the logo classname is “navbar-brand” in it (and your navbar background is called bloc-menu)…
Put it in the and you should be good to go…

    <script>
        var logo = document.getElementsByClassName("navbar-brand")[0];
        var scrollDistance = '30';
        var color = document.getElementsByClassName("bloc-menu")[0];
        window.addEventListener('scroll', function() {
            if ($(this).scrollTop() > scrollDistance) {
                logo.style.transform = "scale(0.65)";
                logo.style.transition = "0.4s";
                logo.style.height = "70px";
                color.style = "background-color: rgb(255,255,255)";
            } else {
                logo.style.transform = "scale(1)";
                logo.style.height = "120px";
                color.style = "background-color: rgba(255,255,255,.7)";
            }
        })
    </script>
2 Likes