CODEWITHSUNDEEP
javascripthtmljquerycsswordpress
Aman
Aman

Reputation: 417

How do I make this sticky navigation show only on scroll up?

My website (you can see the header here ) is using a sticky content navigator on all its pages, with the div structure looking something like this:

<div id="pn-navigation-bar" class="pn-navigation-menu- 
 always" style="top: 32px;">
<div class="pn-progress-bar-wrapper">
<div class="pn-progress-bar">
<div class="pn-complete" style="width: 0px;"></div>
<div class="pn-in-progress" style="width: 0px; left: 0px;"> 
</div>

I'm using the below code to hide the navigator on scroll instead, as demonstrated in this this W3 demo:

<script>
/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("pn-navigation-bar").style.top = "0";
  } else {
    document.getElementById("pn-navigation-bar").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}
</script>

This is inserted in before the closing tag, in the footer section using the 'Insert Header and Footer Scripts' plugin for wordpress. This still doesn't work and does not hide the navigator while the user scrolls down.

What am I doing wrong?

EDIT: I apologize for the ambiguity, but this is the element I'm referring to

Screen Cap

Upvotes: 1

Views: 2065

Answers (2)

Nick390
Nick390

Reputation: 93

I tried to try your code, but no elements appear on the page. The reason is the lack of information that you provided to us. Can you provide us with more information so that we can help you to show the condition you want as it is But what I found out you want the navigation bar to disappear when you scroll down so I tryed to do what you side using CSS only

        *{
            padding: 0px;
            margin: 0px;
        }
        nav{
            background-color: #343433;
        }
        ul{
            text-decoration: none;
            text-align: center;
            padding: 20px;
        }
        li{
            color: #fff;
            display: inline;
            font-size: 1rem;
            padding: 20px 10px;
        }
        article{
            padding: 0px 5rem;
            margin-top: 40px;
        }
        h1{
            padding: 1rem;
            background-color: cornflowerblue;
        }
        p{
            font-size: 18px;
        }
        a{
            color: #fff;
            text-decoration: none;
        }
        a:hover{
            text-decoration: underline;
        }
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">page1</a></li>
        <li><a href="#">page2</a></li>
        <li><a href="#">page3</a></li>
    </ul>
</nav>
<article>
    <h1>page title</h1>
    <p>The Las Tres Vírgenes volcanic field (Baja California Sur, Mexico) hosts one of the five active geothermal power plants operating in Mexico. The volcanic system is considered still active and has been extensively studied during and after the development of the geothermal activities. However the volumes and locations of the magmatic sources, as well as the size of the geothermal reservoir are still poorly known. In this work we use the records of 177 local earthquakes recorded in 2012 by a temporary local seismic network to characterize compressional (Vp) and shear (Vs) wave seismic velocities of the volcanic system from the surface down to 8–10 km of depth. We applied the Enhanced Seismic Tomography method, which incorporates the Double Difference tomography and the post processing Weighted Average Method. Results describe for the first time that the magmatic source reaches at least 4–5 km of depth beneath La Virgen Volcano, feeding a widespread reservoir confined in the first 2–3 km of depth, which is much larger than the currently exploited region.The Las Tres Vírgenes volcanic field (Baja California Sur, Mexico) hosts one of the five active geothermal power plants operating in Mexico. The volcanic system is considered still active and has been extensively studied during and after the development of the geothermal activities. However the volumes and locations of the magmatic sources, as well as the size of the geothermal reservoir are still poorly known. In this work we use the records of 177 local earthquakes recorded in 2012 by a temporary local seismic network to characterize compressional (Vp) and shear (Vs) wave seismic velocities of the volcanic system from the surface down to 8–10 km of depth. We applied the Enhanced Seismic Tomography method, which incorporates the Double Difference tomography and the post processing Weighted Average Method. Results describe for the first time that the magmatic source reaches at least 4–5 km of depth beneath La Virgen Volcano, feeding a widespread reservoir confined in the first 2–3 km of depth, which is much larger than the currently exploited region.The Las Tres Vírgenes volcanic field (Baja California Sur, Mexico) hosts one of the five active geothermal power plants operating in Mexico. The volcanic system is considered still active and has been extensively studied during and after the development of the geothermal activities. However the volumes and locations of the magmatic sources, as well as the size of the geothermal reservoir are still poorly known. In this work we use the records of 177 local earthquakes recorded in 2012 by a temporary local seismic network to characterize compressional (Vp) and shear (Vs) wave seismic velocities of the volcanic system from the surface down to 8–10 km of depth. We applied the Enhanced Seismic Tomography method, which incorporates the Double Difference tomography and the post processing Weighted Average Method. Results describe for the first time that the magmatic source reaches at least 4–5 km of depth beneath La Virgen Volcano, feeding a widespread reservoir confined in the first 2–3 km of depth, which is much larger than the currently exploited region.</p>
    <p>The Las Tres Vírgenes volcanic field (Baja California Sur, Mexico) hosts one of the five active geothermal power plants operating in Mexico. The volcanic system is considered still active and has been extensively studied during and after the development of the geothermal activities. However the volumes and locations of the magmatic sources, as well as the size of the geothermal reservoir are still poorly known. In this work we use the records of 177 local earthquakes recorded in 2012 by a temporary local seismic network to characterize compressional (Vp) and shear (Vs) wave seismic velocities of the volcanic system from the surface down to 8–10 km of depth. We applied the Enhanced Seismic Tomography method, which incorporates the Double Difference tomography and the post processing Weighted Average Method. Results describe for the first time that the magmatic source reaches at least 4–5 km of depth beneath La Virgen Volcano, feeding a widespread reservoir confined in the first 2–3 km of depth, which is much larger than the currently exploited region.The Las Tres Vírgenes volcanic field (Baja California Sur, Mexico) hosts one of the five active geothermal power plants operating in Mexico. The volcanic system is considered still active and has been extensively studied during and after the development of the geothermal activities. However the volumes and locations of the magmatic sources, as well as the size of the geothermal reservoir are still poorly known. In this work we use the records of 177 local earthquakes recorded in 2012 by a temporary local seismic network to characterize compressional (Vp) and shear (Vs) wave seismic velocities of the volcanic system from the surface down to 8–10 km of depth. We applied the Enhanced Seismic Tomography method, which incorporates the Double Difference tomography and the post processing Weighted Average Method. Results describe for the first time that the magmatic source reaches at least 4–5 km of depth beneath La Virgen Volcano, feeding a widespread reservoir confined in the first 2–3 km of depth, which is much larger than the currently exploited region.The Las Tres Vírgenes volcanic field (Baja California Sur, Mexico) hosts one of the five active geothermal power plants operating in Mexico. The volcanic system is considered still active and has been extensively studied during and after the development of the geothermal activities. However the volumes and locations of the magmatic sources, as well as the size of the geothermal reservoir are still poorly known. In this work we use the records of 177 local earthquakes recorded in 2012 by a temporary local seismic network to characterize compressional (Vp) and shear (Vs) wave seismic velocities of the volcanic system from the surface down to 8–10 km of depth. We applied the Enhanced Seismic Tomography method, which incorporates the Double Difference tomography and the post processing Weighted Average Method. Results describe for the first time that the magmatic source reaches at least 4–5 km of depth beneath La Virgen Volcano, feeding a widespread reservoir confined in the first 2–3 km of depth, which is much larger than the currently exploited region.</p>
    <p>The Las Tres Vírgenes volcanic field (Baja California Sur, Mexico) hosts one of the five active geothermal power plants operating in Mexico. The volcanic system is considered still active and has been extensively studied during and after the development of the geothermal activities. However the volumes and locations of the magmatic sources, as well as the size of the geothermal reservoir are still poorly known. In this work we use the records of 177 local earthquakes recorded in 2012 by a temporary local seismic network to characterize compressional (Vp) and shear (Vs) wave seismic velocities of the volcanic system from the surface down to 8–10 km of depth. We applied the Enhanced Seismic Tomography method, which incorporates the Double Difference tomography and the post processing Weighted Average Method. Results describe for the first time that the magmatic source reaches at least 4–5 km of depth beneath La Virgen Volcano, feeding a widespread reservoir confined in the first 2–3 km of depth, which is much larger than the currently exploited region.The Las Tres Vírgenes volcanic field (Baja California Sur, Mexico) hosts one of the five active geothermal power plants operating in Mexico. The volcanic system is considered still active and has been extensively studied during and after the development of the geothermal activities. However the volumes and locations of the magmatic sources, as well as the size of the geothermal reservoir are still poorly known. In this work we use the records of 177 local earthquakes recorded in 2012 by a temporary local seismic network to characterize compressional (Vp) and shear (Vs) wave seismic velocities of the volcanic system from the surface down to 8–10 km of depth. We applied the Enhanced Seismic Tomography method, which incorporates the Double Difference tomography and the post processing Weighted Average Method. Results describe for the first time that the magmatic source reaches at least 4–5 km of depth beneath La Virgen Volcano, feeding a widespread reservoir confined in the first 2–3 km of depth, which is much larger than the currently exploited region.The Las Tres Vírgenes volcanic field (Baja California Sur, Mexico) hosts one of the five active geothermal power plants operating in Mexico. The volcanic system is considered still active and has been extensively studied during and after the development of the geothermal activities. However the volumes and locations of the magmatic sources, as well as the size of the geothermal reservoir are still poorly known. In this work we use the records of 177 local earthquakes recorded in 2012 by a temporary local seismic network to characterize compressional (Vp) and shear (Vs) wave seismic velocities of the volcanic system from the surface down to 8–10 km of depth. We applied the Enhanced Seismic Tomography method, which incorporates the Double Difference tomography and the post processing Weighted Average Method. Results describe for the first time that the magmatic source reaches at least 4–5 km of depth beneath La Virgen Volcano, feeding a widespread reservoir confined in the first 2–3 km of depth, which is much larger than the currently exploited region.</p>
</article>
</body>
</html>

Upvotes: 0

Dipankar Maikap
Dipankar Maikap

Reputation: 477

var prevScrollpos = window.pageYOffset;
window.onscroll = function () {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos < currentScrollPos) {
    document.getElementById("pn-navigation-bar").style.display = "none";
  } else if (prevScrollpos > currentScrollPos) {
    document.getElementById("pn-navigation-bar").removeAttribute("style");
  }
  prevScrollpos = currentScrollPos;
};

It will fix the issue you are having.

Upvotes: 1

Related Questions