Question

我刚开始做一个新网站，所有的东西都很棒，但我无法做出好的菜单：

我想要一个总是在我上去并且菜单改变时开始的动画，但是它不能很好地工作，因为每次我回来都需要这个动画。

这是第一个问题，第二个问题是关于我想要用于不同菜单的Eventhandler，因为当我滚动菜单时会变小一些，然后又会变大。但是当我滚动然后重新加载时，菜单会返回到大的那个，而不是我不能再次启动。

最后一个问题是关于浏览器宽度，如果视口足够大，我希望脚本正在运行，否则它不应该运行。

我创建的菜单有点像牛津页面：https://ox.ac.uk

$(document).ready(function() {
  $(document).on("scroll", function() {
    if ($(document).scrollTop() > 120) {
      $(".header").addClass("small");
      $("#logo").css('display', 'none');
      $(".site-table").css('display', 'none');
      $("#b1-scroll").css('display', 'block');
      $(".site-nav").css('top', '14px');
      $(".site-nav").css('left', '25px');
      $(".second-site-nav").css('top', '28px');
      $(".second-site-nav").css('right', '85px');

    } else {
      $(".header").removeClass("small");
      $("#logo").css('display', 'block');
      $(".site-table").css('display', 'block');
      $("#b1-scroll").css('display', 'none');
      $(".site-nav").css('top', '50px');
      $(".site-nav").css('left', '175px');
      $(".second-site-nav").css('top', '100px');
      $(".second-site-nav").css('right', '20px');
    }
  });
});

如果可能，我希望在此文件中运行所有代码。

我希望你们可以帮助我解决这些问题，尽管他们很难戒掉！

谢谢！

Answer 1

我认为您正在寻找一种名为'Affix'的技术！看一下这个： https://www.w3schools.com/bootstrap/bootstrap_affix.asp（引导实现）！如果你想要它，请告诉我！

使网页菜单更智能，动画/视口/滚动

1 个答案: