在标题标签中压缩代码/脚本

condensing code/script in head tags

本文关键字：代码 脚本 压缩 标题 标签      更新时间：2023-09-26

我有3个脚本硬编码在我的头标签，所有目标在我的网站不同的元素。然而，它们中的大多数都是基于类似的事件(当鼠标滚动等)，我想知道它是否可以组合/浓缩。我已经试过了，但似乎不能让它更小，同时保持功能。

script 1 -当用户向下滚动#nav时，动画#nav会消失，当用户向上滚动#nav时，动画#nav会回来

script 2 -在&lt上移动第二个菜单(#nav-BN);当用户向上或向下滚动768px屏幕

script 3 -隐藏和显示一个div/button> 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>

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

  • 通过将对象存储在变量
    • 中来替换多个jQuery搜索
  • 没有必要有两个类来隐藏和显示，你可以有一个名为"active"的类来代替BN-nav-show，如果这个类缺失，它应该是NB-nav-hide

  • 如果窗口。innerWidth> 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>

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

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>

相关文章：