Question

我的头标签中有3个硬编码的脚本，这些脚本都针对我网站中的不同元素。然而，大多数是基于类似的事件（当鼠标滚动等）时，我想知道它是否可以组合/浓缩。我已经尝试过，但似乎无法在保持功能的同时使其变得更小。

脚本1 - 在用户滚动dwn时动画#nav，在向上滚动时将其恢复

脚本2 - 动画第二个菜单（＃nav-BN）on＆lt;用户向上或向下滚动时的768px屏幕

脚本3 - 隐藏并显示div /按钮＆gt; 768px屏幕，如果更小则隐藏它

<script>
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('nav').outerHeight();

$(window).scroll(function(event) { didScroll = true; });

setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
 }, 250);

function hasScrolled() {
 var st = $(this).scrollTop();
if (Math.abs(lastScrollTop - st) <= delta)
return;

if (st > lastScrollTop && st > navbarHeight ) {
// Scroll Down
$('#s-nav').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if (st + $(window).height() < $(document).height()) {
$('#s-nav').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
</script>


<script>
var lastPos=0;
$(window).scroll(function(event) {
if (window.innerWidth < 768) {
        $('#nav-BN').addClass('BN-nav-hide').removeClass('BN-nav-show');

clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
        $('#nav-BN').addClass('BN-nav-show').removeClass('BN-nav-hide');
}, 250));
}
});
</script>


<script>
$(window).scroll(function () {
if (window.innerWidth > 768) {
    if ($(window).scrollTop() + $(window).height() > ($(document).height() - 200)) {
        $("#up-btn").fadeIn(500);
    } else {
        $("#up-btn").fadeOut(500);
    }
    } else {
       $("#up-btn").fadeOut(250);
    }
});
</script>

Answer 1

你可能会注意到一些重要的事情：

通过将对象存储在变量
没有必要为隐藏和显示两个类，你可以有一个名为＆＃39; active＆＃39;而不是BN-nav-show，如果缺少类，它应该是NB-nav-hide
if（window.innerWidth＆gt; 768）和（window.innerWidth＆lt; 768）可以合并为一个独特的结构：
如果
（）{ } else { }

这应该有帮助

   <script>
      var didScroll;
      var lastScrollTop = 0;
      var delta = 5;
      var navbarHeight = $('nav').outerHeight();
      var $window = $(window);
      var $upBtn = $("#up-btn")

      var lastPos=0;
      window.scroll(function(event) {
        didScroll = true;
        var $navBN = $('#nav-BN');

        if (window.innerWidth > 768) {
          if ($window.scrollTop() + window .height() > ($(document).height() - 200)) {
            upBtn.fadeIn(500);
          } else {
            upBtn.fadeOut(500);
          }
        } else {
          navBN.removeClass('active');    
          clearTimeout($.data(this, 'scrollTimer'));
          $.data(this, 'scrollTimer', setTimeout(function() {
            navBN.addClass('active');
          }, 250));

          upBtn.fadeOut(250);
        }

      });

      function hasScrolled() {
        var st = $(this).scrollTop();
        if (Math.abs(lastScrollTop - st) <= delta) return;

        if (st > lastScrollTop && st > navbarHeight ) {
          // Scroll Down
          $('#s-nav').removeClass('nav-down').addClass('nav-up');
        } else {
          // Scroll Up
          if (st + $(window).height() < $(document).height()) {
            $('#s-nav').removeClass('nav-up').addClass('nav-down');
          }
        }
        lastScrollTop = st;
      }


    setInterval(function() {
      if (didScroll) {
        hasScrolled();
        didScroll = false;
      }
    }, 250);

</script>

Answer 2

如果切换类没有问题，那么就可以这样做

https://jsfiddle.net/9yhug2qg/1/

var windowST, navBar, navBarHeight;

$(window).on('scroll', function () {
  windowST = $(window).scrollTop();
  navBar = $('.navbar');
  navBarHeight = parseInt(navBar.height());

  if (windowST > navBarHeight) {
    $(navBar).addClass('out-of-area');
  } else {
    $(navBar).removeClass("out-of-area");
  }
});

* { margin: 0;padding: 0; }

body { height: 700vh; }

.navbar {
  position: fixed;
  width: calc(100%);
  height: 70px;
  background-color: #0ff;
  color: #fff;
  transition: all 1s ease
}

ul {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  visibility: visible;
  width:calc(100% - 60px);
  height: 60px;
  background-color: #fff;
}

.navbar.out-of-area {
  transform: translateY(-100px);
}

.navbar > .nav_btn {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #151515;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  visibility: hidden;
}

@media only screen and (max-width: 768px) {
  .navbar > .nav_btn { visibility: visible; }
  ul { visibility: hidden; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <nav class="navbar">
    <nav class="nav_btn"></nav>
    <ul></ul>
  </nav>
</div>

压缩头标签中的代码/脚本

2 个答案: