NAVBAR transparent

Navigation
0

Personal a half-beast doubt,

I'm doing a landing page and wanted to use a navbar-style from that site here:

link

When it is at the top of the page it becomes completely transparent and as soon as the page goes down it already gains a color but without losing the transparency ...

    
asked by anonymous 17.06.2018 / 05:07

2 answers

1

I made a very primitive example using a bit of Js, to serve as a basis. I think it will solve your problem when you apply the styles. I opted to use pure js for you to have a greater understanding of what's going on, but you could use JQuery as well or bootstrap features! If you want to know more about the subject search about Affix, follow some links:

Affix with Bootstrap 3: link

W3Schools on affix: link 

window.onscroll = scroll;

function scroll() {
  var scrollTop = window.pageYOffset;
  if (scrollTop > 30) {
    try {
      document.getElementById('antes').id = 'depois'
    } catch (e) { 
      false 
    }
  } else {
    try {
      document.getElementById('depois').id = 'antes'
    } catch (e) { 
      false
    }
  }
}
body {
  height: 1000px
}

main {
  position: relative;
  top: 60px
}

#antes {
  height: 50px;
  width: 100%;
  z-index: 10;
  position: fixed;
  transition: all 0.5s ease-in-out;
  background-color: blue;
}

#depois {
  height: 50px;
  width: 100%;
  z-index: 10;
  position: fixed;
  transition: all 0.5s ease-in-out;
  background-color: green;
  opacity: 0.9;
}
<div id='antes'>
  Hello world!
</div>

<main>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a fermentum nisl. Sed id elementum est. Vivamus pharetra scelerisque mauris ut lobortis. Suspendisse gravida luctus orci volutpat tincidunt. Donec a erat luctus, rhoncus orci condimentum,
  aliquet nunc. Nulla varius nisi a pretium pretium. Phasellus et mattis mi. Suspendisse efficitur elit eget libero laoreet ornare. Sed eget tristique erat. Vestibulum nec nulla in massa cursus feugiat. Mauris aliquam dolor in auctor fringilla. Maecenas
  efficitur quam vel pellentesque faucibus.
</main>
    
17.06.2018 / 06:32
0

Using jQuery, create a scroll event, and in the function you can get the distance between where you are on the page and top with $(window).scrollTop() , check if that value is zero, if it is, put a transparent background if not the color you want. 

$(window).scroll(function() {
  if($(window).scrollTop() === 0) {
    $("nav").css("background-color", "rgba(0, 0, 0, 0)");
  } else {
    $("nav").css("background-color", "rgba(255, 0, 0, 0.3)");
  }
});
nav {
  width: 100%;
  height: 100px;
  position: fixed;
}

body {
  height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav></nav>
    
17.06.2018 / 06:37
Error trying to encrypt with BCRYPT in Python Separate respective item from a JSON array