HelpmePLS HelpmePLS - 2 months ago 23
Javascript Question

Sticky nav assistance

I've been trying to make a sticky nav with the source code down bellow, but just simply cant find anything or make anything work.

The code has the two nav bars TOP & MID that i'd hope someone could help me create the TOPnav go behind the MIDnav at a certain point to create that sticky like effect.

I have no JS linked cause i hope someone could give me a rough idea of what to do.

thank you :).

PS: if anything in my code seem odd/weird or perhaps not needed feel free to point it out as i hope to improve it.



html{

overflow-x: hidden;
height: 2000px;


background: white;
}


.TOPNAV {
position: fixed;
width: 80vw;
height: 20px;
margin-top: -720px;
margin-left: -10px;
border-top: 70px solid #AC3838;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
z-index: 10;
}
.TOPNAV a {
position: fixed;
font-family: 'Bungee', cursive;
text-decoration: none;
font-size: 20px;
margin-top: -60px;
margin-left: 4vw;
color: white;
text-shadow: 1px 1px 1px black, 0 0 0 #000, 2px 4px 10px black;
}
.TOPNAV li {
float: left;
width: 15vw;
padding: 0px 0px 10px 0px;
display: block;
list-style-type: none;
}
.MIDNAV {
position: relative;
width: 100vw;
height: 20px;
margin-top: 730px;
margin-left: -10px;
border-bottom: 70px solid #575194;
z-index: 10;
}
.MIDNAV a {
position: absolute;
font-family: 'Bungee', cursive;
text-decoration: none;
font-size: 20px;
margin-top: 30px;
margin-left: 10vw;
color: white;
text-shadow: 1px 1px 1px black, 0 0 0 #000, 2px 4px 10px black;
}
.MIDNAV li {
float: left;
width: 15vw;
padding: 0px 0px 20px 0px;
display: block;
list-style-type: none;
}

<html>


<head>

<title></title>

<link rel="stylesheet" type="text/css" href=".//CSS\SCRAP_CSS.css">


<script src="JS/jquery-3.1.0.js" type="text/javascript"></script>

<script type="text/javascript" src="JS/SCRAP.js"></script>



<link href="https://fonts.googleapis.com/css?family=Bungee" rel="stylesheet">

</head>

<body>






<div class="TOPNAV">



<li><a href="Page2.html">Home</a>
</li>
<li><a href="Page2.html">Index</a>
</li>
<li><a href="Page2.html">About</a>
</li>
<li><a href="Page2.html">List</a>
</li>
<li><a href="Page2.html">Login</a>
</li>


</div>




<div class="MIDNAV">


<li><a href="Page2.html">Home</a>
</li>
<li><a href="Page2.html">Index</a>
</li>
<li><a href="Page2.html">About</a>
</li>
<li><a href="Page2.html">List</a>
</li>
<li><a href="Page2.html">Login</a>
</li>


</div>






</body>

</html>




Answer

$window = $(window);
$window.scroll(function() {
  $scroll_position = $window.scrollTop();
    if ($scroll_position > 300) { // if body is scrolled down by 300 pixels
        $('.MIDNAV').addClass('sticky');
        $('.TOPNAV').addClass('sticky');

        // to get rid of jerk
        header_height = $('.TOPNAV').innerHeight();
        $('body').css('padding-top' , header_height);
    } else {
        $('body').css('padding-top' , '0');
        $('.MIDNAV').removeClass('sticky');
        $('.TOPNAV').removeClass('sticky');

    }
 });
html{

overflow-x: hidden;
height: 2000px;


background: white;
}


.TOPNAV {
  position: fixed;
  width: 80vw;
  height: 20px;
  margin-left: -10px;
  border-top: 70px solid #AC3838;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  z-index: 10;
}
.TOPNAV a {
  position: fixed;
  font-family: 'Bungee', cursive;
  text-decoration: none;
  font-size: 20px;
  margin-top: -60px;
  margin-left: 4vw;
  color: white;
  text-shadow: 1px 1px 1px black, 0 0 0 #000, 2px 4px 10px black;
  display:block;
}
.TOPNAV li {
  float: left;
  width: 15vw;
  padding: 0px 0px 10px 0px;
  display: block;
  list-style-type: none;
}
.MIDNAV {
  position: fixed;
  width: 100vw;
  height: 20px;
  margin-left: -10px;
  border-bottom: 70px solid #575194;
  z-index: 10;
  display:none;
}
.MIDNAV a {
  position: absolute;
  font-family: 'Bungee', cursive;
  text-decoration: none;
  font-size: 20px;
  margin-top: 30px;
  margin-left: 10vw;
  color: white;
  text-shadow: 1px 1px 1px black, 0 0 0 #000, 2px 4px 10px black;
}
.MIDNAV.sticky{
display:block;
}
.TOPNAV.sticky{
 display:none;
}
.MIDNAV li {
  float: left;
  width: 15vw;
  padding: 0px 0px 20px 0px;
  display: block;
  list-style-type: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>


<head>

  <title></title>

  <link rel="stylesheet" type="text/css" href=".//CSS\SCRAP_CSS.css">


  <script src="JS/jquery-3.1.0.js" type="text/javascript"></script>

  <script type="text/javascript" src="JS/SCRAP.js"></script>



  <link href="https://fonts.googleapis.com/css?family=Bungee" rel="stylesheet">

</head>

<body>



hhhgjh


  <div class="TOPNAV">



    <li><a href="Page2.html">Home</a> 
    </li>
    <li><a href="Page2.html">Index</a> 
    </li>
    <li><a href="Page2.html">About</a> 
    </li>
    <li><a href="Page2.html">List</a> 
    </li>
    <li><a href="Page2.html">Login</a> 
    </li>


  </div>




  <div class="MIDNAV">


    <li><a href="Page2.html">Home</a> 
    </li>
    <li><a href="Page2.html">Index</a> 
    </li>
    <li><a href="Page2.html">About</a> 
    </li>
    <li><a href="Page2.html">List</a> 
    </li>
    <li><a href="Page2.html">Login</a> 
    </li>


  </div>






</body>

</html>