TRANSPARENT NAVBAR

Asked

Viewed 1,255 times

0

javascript html jquery css twitter-bootstrap

  • Take this question: https://answall.com/a/237138/66424

2 answers

1


I made a very primitive example using a little Js, to serve as a basis. I believe it will solve your problem when applying the styles. I chose 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 on, Affix, follow some links:

Affix with Bootstrap 3: https://getbootstrap.com/docs/3.3/javascript/#affix

W3schools about affix: https://www.w3schools.com/bootstrap/bootstrap_ref_js_affix.asp

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>

  • While this link may answer the question, it is best to include the essential parts of the answer here and provide the link for reference. Replies per link only can be invalidated if the page with the link is changed. - Of Revision

  • @Noobsaibot Thanks for the tip! I put the code right here and made some changes.

  • 1

    Dude thanks worked out !!!!

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 that this 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>

Browser other questions tagged javascript html jquery css twitter-bootstrap

You are not signed in. Login or sign up in order to post.