0

I'm new to html/css, and I want to using only HTML/CSS to make navbar always on top when scroll down becoming transparents. it's possible? right now it's make me crazy I can't make background image under my navbar. where should I change the CSS part? here is what I expect to become
[a link] https://frankyeah.github.io/Front-Enter/index.html

What I have done is the following

HTML:

<nav>
     <div>
         <a href="" class="logo"><img src="./image/FE_logo-4.png"></a>
         Logo
     </div>

     <div class="navlist">
     <a href="">explore</a>
     <a href="">Skill</a>
     <a href="">login</a>
     </div>

     <div>
     <a href="" class="search"><img src="./image/FE_search_green.png"> 
     </a> 
     </div>
</nav>

<main>
     <div class="mainview"></div>
     <div class="mainview2"></div>
     <div></div>
     <div></div>
     <div></div>
</main>

CSS:


 <style>
        nav{
            display: flex;
            justify-content: space-between;
            flex-flow:row nowrap;
            position: fixed;
            width:100%;
            background-color: white;
            opacity:0.7;
            z-index:999 ;
            margin: 0 auto;
            padding: 0;
        }
        .logo>img{
            display: flex;
            flex-flow:row nowrap;
            width:50%;
            margin-top:5%;
            margin-left:20%;
        }
        .navlist{
            display: flex;
            flex-flow:row nowrap;
            width:40%;
            justify-content: space-evenly;
            margin-top:2.5%;
            margin-left:40%;
            font-family:"arial";
        }
        a:hover{
            color:  #66FFFF;
        }
        div a{
            text-decoration: none;
            color:#AAAAAA;
        }
        .search>img {
            display: flex;
            flex-flow:row nowrap;
            margin:30px 50px;
            width:20%;
        }
        .mainview{
    overflow: hidden;
    background-image:url("../image/key-visual.jpg");
    background-repeat:no-repeat;
    background-attachment:scroll; 
    background-size: cover;
    widows: 100%;
    height: 100%;
    padding-top: 50%; 
}
.mainview2{
    background-image:url("../image/second-img.jpg");
    background-attachment:scroll; 
    background-position:top left;
    background-repeat:no-repeat;
    background-size: cover;
    widows: 100%;
    height: 100%;
    padding-top: 50%; 
    margin: 0 0;
}
    </style>

I expect the background image will under my navbar and when scrolling down navbar will be transparents, but something going wrong.

Jhuang Chen
  • 15
  • 7

2 Answers2

0

I think you need to learn about the a parallax scrolling effect. You can learn it from this link : https://www.w3schools.com/howto/howto_css_parallax.asp 

  <style>
.parallax { 
  /* The image used */
  background-image: url("img_parallax.jpg");

  /* Set a specific height */
  height: 500px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>

<!-- Container element -->
<div class="parallax"></div>

It is possible to change the nav bar transparency based on the scroll position using css and javascript. I have modified your code and you can see it in this link : https://jsfiddle.net/SyamKumarD/r37n6cp8/20/

Hope this will help

Syam
  • 303
  • 1
  • 8
0

You cannot detect if scrolling happens with only css. You must use JavaScript/jQuery.

In your website example though, it looks like the header is always transparent, and it is just resting above a white div at the top of the page.

Try adding a div to the top of your page and setting its height to the same height of the navbar, similar to the website.

Morrison Bower
  • 158
  • 7