Click on button to display div which should be fixed when scrolling down. Div not showing properly though?

Question

I have a fixed header which has a button (menu icon) on it. Whenever I scroll down the header will show (as it’s fixed). When I click on the menu button the menu is then also in a fixed position on the right hand side. When I scroll down both header and menu show which is fine. THE PROBLEM is when I initially scroll down half way down the page AND THEN click on the menu button the menu (div) is at the top-when I scroll a bit then it displays. There's a delay in this. Do you know how I can get the menu to display regardless of where I am on the page (in terms of y position)????

Top is set as 100px for the menu in a class (as the headers height is 100px-so i want the menu to show under it) BUT obviously if I’m already half way down the page the menu still takes into account the top: 100px however, I want it to change because I’ve scrolled down so the top position value would be different.

Any help??

Answer 1

在黑暗中拍摄，我认为你的问题是 你的固定位置检查正在发生 - IE，我猜测他们是在.scroll事件中窗口。

在向下滚动之前，单击菜单按钮，它会设置为在初始位置显示块 - 这是正确的，因为您还没有向下滚动。

但是，如果您先向下滚动，然后显示菜单 - 它仍会显示在其初始位置 - 因为检查位于您的.scroll事件中 - 当菜单打开时你没有被解雇。

尝试在按钮逻辑中应用位置检查。