JS：有没有办法在点击功能中调用滚动功能，或者将两者结合起来？

Question

我的页面有一个粘性导航栏，其 'stickiness' 工作正常，但导航栏的 2 个主要内部元素* 的行为不连续。 2 个主要的内部元素是徽标和 滑出式导航栏 （点击激活）。预期行为如下：

徽标（在橙色条的中心）默认必须 'hide' 且仅当用户从顶部向下滚动 80px（或从文档的顶部滚动到 80 像素）。
用户滚动到距顶部 80 像素以内时，徽标必须立即隐藏文档。
但是，徽标绝不能在滑出式导航栏处于活动状态的同时可见。然而，当导航栏处于非活动状态时，它必须再次可见。
与徽标不同，导航栏图标必须始终可见，并且
像logo一样，一定要有粘性。

在 jsfiddle 中，所有预期的行为都会出现，但仅限于滚动，而不是点击。 IE。向下滚动超过 80px 后，徽标将可见（这很好），但在单击导航栏图标进入活动状态时不会隐藏（除非导航元素已经处于活动状态）。这个问题在我滚动时解决了，但在我想要发生的点击时没有解决。

我知道为什么会这样，这是因为虽然我在 $(window).scroll(function () 中处理了所有这些情况，但我还没有在 $("#menu-opener").click(function() 只是因为我不能在那里使用 scrollTop() ，所以我也不能成功地结合这两个函数。

那么，我该如何解决这个问题，是通过组合函数、在 clickfunction 中调用 scrollTop() 还是其他方式？非常感谢任何帮助。

请注意：虽然我说“导航栏的 2 个主要内部元素”，但实际上我已经将徽标和滑出式导航栏放在分离 div 并希望它保持这种状态

Answer 1

https://jsfiddle.net/91gxLvbb/6/

我添加了#menulogo:

$("#menu-opener").click(function(){
  $("#menu-opener, #menu-opener-inner, #menu, #menulogo").toggleClass("active");
});

以及css：

#menulogo.active #logoflag{display:none}

Answer 2

那你为什么不能在那里使用 scrollTop？

这不是预期的行为吗：

https://jsfiddle.net/91gxLvbb/4/

您可以使用以下方法检查滚动条：

if($(window).scrollTop() > 80)

JS：有没有办法在点击功能中调用滚动功能，或者将两者结合起来？

JS: Is there a way to call a scroll function within a click function, or combine both?

javascript

jquery

navbar

sticky