'I want to make my navbar transparent and solid on scroll only with html, css and js. Can you please explain how?

I want to make my navbar transparent and solid on scroll only with html, css and js. Can you please explain how?

Down here you have my html part

<header class="header">

   <a href="#" class="logo">noname<span> noname</span></a>

   <nav class="navbar">
      <i class="fas fa-users"></i><a href="#about">ABOUT US</a>
      
      <i class='fa fa-circle' style='color: white'></i><a href="#products">PRODUCTS</a>
      
      <i class='fa fa-phone fa-flip-horizontal'></i><a href="#contact">CONTACT</a>

     
     
   </nav>

   <div class="icons">
      <div id="menu-btn" class="fas fa-bars"></div>
   
   </div>

   
</header>

Solution 1:^[1]

In the code below, by scrolling down, the navbar gets smaller and opacity is changed to 0.5, when scrolling back up, its changed back to the initial style.

Initial idea is from: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_shrink_scroll

<style>
    * {
        box-sizing: border-box;
    }
    
    body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
    }
    
    #navbar {
        overflow: hidden;
        background-color: lightgrey;
        padding: 90px 10px;
        transition: 0.4s;
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 99;
    }
    
    #navbar a {
        float: left;
        color: black;
        text-align: center;
        padding: 12px;
        text-decoration: none;
        font-size: 18px;
        line-height: 25px;
        border-radius: 4px;
    }
    
    #navbar #logo {
        font-size: 35px;
        font-weight: bold;
        transition: 0.4s;
    }
    
    #navbar a:hover {
        background-color: #ddd;
        color: black;
    }
    
    #navbar a.active {
        background-color: dodgerblue;
        color: white;
    }
    
    #navbar-right {
        float: right;
    }
    
    @media screen and (max-width: 580px) {
        #navbar {
            padding: 20px 10px !important;
        }
        #navbar a {
            float: none;
            display: block;
            text-align: left;
        }
        #navbar-right {
            float: none;
        }
    }
</style>

<body>

<div id="navbar">
    <a href="#default" id="logo">CompanyLogo</a>
    <div id="navbar-right">
        <a class="active" href="#aboutus">About Us</a>
        <a href="#products">Products</a>
        <a href="#contact">Contact</a>
    </div>
</div>

<div style="margin-top:210px;padding:15px 15px 2500px;font-size:30px">
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
</div>

<script>
    // When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
    window.onscroll = function() {
        scrollFunction()
    };

    function scrollFunction() {
        if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
            document.getElementById("navbar").style.padding = "30px 10px";
            document.getElementById("navbar").style.opacity = "0.5";
            document.getElementById("logo").style.fontSize = "25px";
        } else {
            document.getElementById("navbar").style.padding = "80px 10px";
            document.getElementById("logo").style.fontSize = "35px";
            document.getElementById("navbar").style.opacity = "1";
        }
    }
</script>

Solution 2:^[2]

If you want to fix your code so that it would work, be sure to add html within the style section of your code. Like this:

<html><img src="img.jpg" alt="img"></html> <style>html { text-align: center; }</style>

But that will make everything centered. If you want only the image to be centered, do this: <html><img src="img.jpg" id="myimage" alt="img"></html> <style>#myimage { text-align: center; }</style>

There's an alternate solution (which someone else already posted here), about using display:block and margin:0 auto -- that's also doable.

There are 2 ways that this could work for you:

Option 1:

<html><img src="img.jpg" style="display:block; margin:0 auto;" alt="you should probably leave alt blank if the image is decorative, otherwise actually describe what it is"></html> <style>html { text-align: center; }</style>

Option 2:

<html><img src="img.jpg" id="#myimage" alt="img"></html> <style>#myimage{ display:block;margin: 0 auto; }</style>

Ultimately, it comes down to actually learning CSS and how stylesheets work. You might want to do some learning about that, find some "learn CSS" videos on youtube and websites -- this is sorta core stuff, so if you don't understand it yet, research the basics a bit more.

Solution 3:^[3]

For an image specifically, you could use display: block and margin:0 auto like: <img src="img.jpg" style="display:block; margin:0 auto;" alt="img">

Additional Reading: https://www.freecodecamp.org/news/how-to-center-an-image-in-css/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Leonardo Repolust
Solution 2	Recording Dot LA Adam Borecki
Solution 3	freefall

'I want to make my navbar transparent and solid on scroll only with html, css and js. Can you please explain how?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]