【问题标题】:How do I make this sticky navigation show only on scroll up?如何仅在向上滚动时显示此粘性导航?
【发布时间】:2020-10-10 12:42:39
【问题描述】:

我的网站(您可以看到标题 here )在其所有页面上都使用粘性内容导航器,div 结构看起来像这样:

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

我正在使用下面的代码来隐藏滚动时的导航器,如this W3 演示中所示:

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

这被插入到结束标记之前,使用 wordpress 的“插入页眉和页脚脚本”插件在页脚部分。这仍然不起作用,并且在用户向下滚动时不会隐藏导航器。

我做错了什么?

编辑:我为歧义道歉,但这是我所指的元素

【问题讨论】:

    标签: javascript html jquery css wordpress


    【解决方案1】:
    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;
    };
    

    它将解决您遇到的问题。

    【讨论】:

    • 嗨!我尝试将此添加到我的页脚,但它仍然不起作用。我应该按原样粘贴吗?
    • 是的,替换您网站页脚中的 javascript。我已经在您的网站上尝试过,它应该可以解决您遇到的问题。
    • 这非常有效,非常感谢!目前效果有点刺眼,能不能顺利滑进去?我正在尝试这段代码:#pn-navigation-bar { position: fixed; top: 0; width: 100%; display: block; transition: top 0.3s; } ,但它还不起作用。
    • 如果你想要流畅的体验,你可以这样做。替换为这两行。 document.getElementById("pn-navigation-bar").style.opacity = 0; document.getElementById("pn-navigation-bar").style.opacity = 1;
    • 太棒了!你是个巫师,过去三四天我一直在为此苦苦挣扎!如果可以的话,我可能会向您寻求更多帮助:)
    【解决方案2】:

    我尝试尝试您的代码,但页面上没有出现任何元素。原因是您提供给我们的信息不足。您能否向我们提供更多信息,以便我们可以帮助您按原样显示您想要的条件但是我发现您希望导航栏在您向下滚动时消失,所以我尝试仅使用 CSS 来做您身边的事情

            *{
                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>

    【讨论】:

    • 感谢您的回答!其实问题不在于让它不粘。我希望仅在页面检测到用户向上滚动时才显示它。 headroom.js 之类的东西,但我不知道如何让它在我的网站上运行。我在原帖中添加了一些关于我所指元素的更多信息。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多