Question

我正在使用某些 stock javascript向下滚动时隐藏导航，而在向上滚动时再次显示。

除了Safari移动版之外，它都可以完美运行。

当页面向下滚动然后向上拖动超过顶部时，或者导航位于页面顶部，并且向下拖动屏幕时，Safari上的弹性/过度滚动会导致滚动位置大于0并隐藏导航。

我的希望只能通过向下滚动例如100px后调用javascript来解决。

我修改此代码的问题至少是缺少javascript语言基础。

以下是在桌面浏览器上完美运行的代码：

<script type="text/javascript">
/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
/* ID Phlox:site-header Elementor Custom:iz-nav  */
function getBodyScrollTop () { const el = document.scrollingElement || document.documentElement return el.scrollTop }
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos ) {
    document.getElementById("site-header").style.top = "0";
  } else {
    document.getElementById("site-header").style.top = "-60px";
  }
  prevScrollpos = currentScrollPos;
} 
</script>

以下是我尝试向该脚本添加/更改内容的2个示例，以便在滚动范围介于0到100像素之间时，Nav可见（ style.top =“ 0” ）。 / p>

基本上“获取”滚动pos变量，并使用&&（AND）|| （OR）逻辑条件运算符。

1）

if (prevScrollpos > currentScrollPos && currentScrollPos > 100 ) {
document.getElementById("site-header").style.top = "0";

2）

if (prevScrollpos > currentScrollPos || window.pageYOffset < 100 ) {
document.getElementById("site-header").style.top = "0"

我甚至还应该写它吗？

获取javascript show hide Nav

0 个答案: