CODEWITHSUNDEEP
jquerycss
gwiz_kid
gwiz_kid

Reputation: 63

How do I make the Nav start transparent but appear on scroll and fade out when scrolling in reverse; while keeping the nav links visible?

Ideally I would like for the nav to start transparent with the nav links still visible at all times. I've tried multiple re-writing the js file but it does not respond or it completely disappears. 

<html lang="en">
<meta charset="utf-8" />

<head>
<title>Example Page</title>
<link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" />
</head>

  <body>

  <div id="container">
  <header>
  <div id="static_nav">
    <nav class='navbar'>
      <a href="#block_two">HOME</a>
      <a href="#block_three">ABOUT</a>
      <a href="#block_four">PEOPLE</a>
      <a href="#end_block">CONTACT</a>
      <a href="Member Login">LOG IN</a>
    </nav>
  </div>
</header>

<div id="block_two">
</div>

<div id="block_three">

  <div id="column-left">
    <header class="b3_hd">
      Hospitality
    </header>
    <div class="b3_pics">
      <div id="pic1">
      </div>
    </div>
    <p class="area_content">

    </p>
    </div>

  <div id="column-center">
    <header class="b3_hd">
    COLUMN CENTER
    </header>
    <div class="b3_pics">
      <div id="pic2">
      </div>
    </div>
    <p class="area_content">
    </p>
  </div>

  <div id="column-right">
    <header class="b3_hd">
      COLUMN RIGHT
    </header>
    <div class="b3_pics">
      <div id="pic3">
      </div>
    </div>
    <p class="area_content">
    </p>
  </div>
</div>

<div id="block_four">
  <header class="b4"> PEOPLE </header>
</div>

<div id="end_block">
  <header class="eb_header">
    CONTACT
  </header>
</div>
</div>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</body>
</html>

CSS:

html {
overflow: hidden;

}

body {
height: 100%;
width: 100%;
max-width: 100%;
overflow-y: auto;
overflow-x: hidden;
margin: 0;

}

div#static_nav{
font-family: Arial, sans-serif;
padding-top: 10px;
text-align: right;
width: 100%;
height: 2em;
background-color: #3A3D3F;
position:fixed;
opacity: .90;
color: red;
vertical-align: middle;

}

div#static_nav a{
color: white;
text-decoration: none;
padding-right: 20px;
}

.navbar {
padding-right: 20px;
padding-top: 2px;
}

div#container {
margin-top: 10px
height: 10vh
width: 100%;
background-color: #16BA81;
color:;
}

div#block_two{
background-color: ;
padding-top: 10px;
height: 100vh;
background-image: url(/New_Website/sample_image.png);
background-size: cover;
}

div#block_three{
padding-top: 10px;
height: 100vh;
background-color: #E4E2E2;

}

div#column-left{
padding-top: 60px;
float: left;
width: 33%;
text-align: center;
font-size: 30px;
font-family: Helvetica, sans-serif;
}

div#column-right{
padding-top: 60px;
float: left;
width: 33%;
text-align: center;
font-size: 30px;
font-family: Helvetica, sans-serif;
}

div#column-center{
padding-top: 60px;
float: left;
width: 33%;
text-align: center;
font-size: 30px;
font-family: Helvetica, sans-serif;
}

div#block_four{
padding: 10px;
height: 100vh;
background-color: #E4E2E2;
}

div#end_block{
padding: 10px;
background-color: #F2F2F2;
height: 50vh;
text-align: center;
}

.area_content{
padding-left: 20px;
padding-right: 20px;
font-size: 20px;
color: #3A3D3F;
margin-left: auto;
margin-right: auto;
display: inline-block;
text-align: left;
}

.eb_header{
font-size: 30px;
font-family: Helvetica, sans-serif;
color: #3A3D3F;
}

.b3_pics{
max-width: inherit;
height: 50%;
}

.b4{
padding-top: 60px;
max-width: inherit;
text-align: center;
font-size: 30px;
font-family: Helvetica, sans-serif;
color: #3A3D3F;
}

.b3_hd{
color: #3A3D3F;
}

jquery

//I couldn't figure out what I'm doing wrong in the js file. I'm not getting a response at all.

(function($) {
$(document).ready(function(){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 200) {
            $('#static_nav').fadeIn(500);
        } else {
            $('#static_nav').fadeOut(500);
        }
    });
  });
});

Upvotes: 1

Views: 41

Answers (3)

Dhouglas Oaktree
Dhouglas Oaktree

Reputation: 25

I use bootstrap to create transparent navbars. So don't forget to include the following scripts: 

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

HTML:

<nav class="navbar navbar-inverse navbar-fixed-top transparent">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
      </button>
      <a class="navbar-brand" style="color:red" href="http://www.coding123.org/" target="newwindow">Dhouglas Oaktree</a>
    </div> <!-- .navbar-header -->
    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#about">Menu1</a></li>
        <li><a href="#portfolio">Menu2</a></li>
        <li><a href="#contact">Menu3</a></li>
      </ul>
    </div> <!-- .navbar-collapse -->
  </div> <!-- .container -->
</nav>

CSS: 

.transparent {
  background: transparent;
}

.navbar-inverse {
  transition: all 0.2s ease-in;
}
.navbar-brand a:hover{
    color:red;

}
#navbar a:hover {
    color:red;

}

#navbar:focus {
     color:blue;
}

I hope that helps. Lemme know if you have other questions.

Upvotes: 0

Brad
Brad

Reputation: 8698

You are very close. Firstly I notice you had overflow:hidden on your html so you wouldn't ever get a scroll bar since all the content will be hidden. I have removed it.

Then I have given your div#static_nav a transparent background by default.

Then using your jQuery function when it scrolls to the right place we add the new class .static_nav_full which gives it the full background.

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 200) {
      $('#static_nav').addClass("static_nav_full");
    } else {
      $('#static_nav').removeClass("static_nav_full");
    }
  });
});
html {
  overflow: scroll;
}
body {
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
}
div#static_nav {
  font-family: Arial, sans-serif;
  padding-top: 10px;
  text-align: right;
  width: 100%;
  height: 2em;
  background-color: transparent;
  position: fixed;
  opacity: .90;
  color: red;
  vertical-align: middle;
}
.static_nav_full {
  background-color: #3A3D3F!important;
  transition: background-color 1s;
}
div#static_nav a {
  color: white;
  text-decoration: none;
  padding-right: 20px;
}
.navbar {
  padding-right: 20px;
  padding-top: 2px;
}
div#container {
  margin-top: 10px height: 10vh width: 100%;
  background-color: #16BA81;
  color: ;
}
div#block_two {
  background-color: ;
  padding-top: 10px;
  height: 100vh;
  background-image: url(/New_Website/sample_image.png);
  background-size: cover;
}
div#block_three {
  padding-top: 10px;
  height: 100vh;
  background-color: #E4E2E2;
}
div#column-left {
  padding-top: 60px;
  float: left;
  width: 33%;
  text-align: center;
  font-size: 30px;
  font-family: Helvetica, sans-serif;
}
div#column-right {
  padding-top: 60px;
  float: left;
  width: 33%;
  text-align: center;
  font-size: 30px;
  font-family: Helvetica, sans-serif;
}
div#column-center {
  padding-top: 60px;
  float: left;
  width: 33%;
  text-align: center;
  font-size: 30px;
  font-family: Helvetica, sans-serif;
}
div#block_four {
  padding: 10px;
  height: 100vh;
  background-color: #E4E2E2;
}
div#end_block {
  padding: 10px;
  background-color: #F2F2F2;
  height: 50vh;
  text-align: center;
}
.area_content {
  padding-left: 20px;
  padding-right: 20px;
  font-size: 20px;
  color: #3A3D3F;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  text-align: left;
}
.eb_header {
  font-size: 30px;
  font-family: Helvetica, sans-serif;
  color: #3A3D3F;
}
.b3_pics {
  max-width: inherit;
  height: 50%;
}
.b4 {
  padding-top: 60px;
  max-width: inherit;
  text-align: center;
  font-size: 30px;
  font-family: Helvetica, sans-serif;
  color: #3A3D3F;
}
.b3_hd {
  color: #3A3D3F;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="container">
  <header>
    <div id="static_nav">
      <nav class='navbar'>
        <a href="#block_two">HOME</a>
        <a href="#block_three">ABOUT</a>
        <a href="#block_four">PEOPLE</a>
        <a href="#end_block">CONTACT</a>
        <a href="Member Login">LOG IN</a>
      </nav>
    </div>
  </header>

  <div id="block_two">
  </div>

  <div id="block_three">

    <div id="column-left">
      <header class="b3_hd">
        Hospitality
      </header>
      <div class="b3_pics">
        <div id="pic1">
        </div>
      </div>
      <p class="area_content">

      </p>
    </div>

    <div id="column-center">
      <header class="b3_hd">
        COLUMN CENTER
      </header>
      <div class="b3_pics">
        <div id="pic2">
        </div>
      </div>
      <p class="area_content">
      </p>
    </div>

    <div id="column-right">
      <header class="b3_hd">
        COLUMN RIGHT
      </header>
      <div class="b3_pics">
        <div id="pic3">
        </div>
      </div>
      <p class="area_content">
      </p>
    </div>
  </div>

  <div id="block_four">
    <header class="b4">PEOPLE</header>
  </div>

  <div id="end_block">
    <header class="eb_header">
      CONTACT
    </header>
  </div>
  <div style="height:150vh;"></div>
</div>

Upvotes: 2

Evochrome
Evochrome

Reputation: 1215

Try this, compare the position first with the position after scroll. Also, I like $(document).scroll. ;)

  $(document).ready(function(){
    var oldScrollTop = 0;
    $(document).scroll(function(){
        if ($(this).scrollTop() > oldScrollTop) {
            $('#static_nav').fadeIn(500);
        } else {
            $('#static_nav').fadeOut(500);
        }
        oldScrollTop = $(this).scrollTop();
    });
  });

Hope it helps :)

Upvotes: 0

Related Questions