resize到页面后固定导航栏问题

我有一个页面，如果你点击你会看到演示页面，并有一个隐藏的固定菜单。

滚动页面向下滚动后，您将看到固定菜单设置为display:block如图所示： 但是如果我正在调整窗口大小并且如果我将滚动页面翻到正常的桌面模式后出现，你看到我的固定菜单没有隐藏

另一个问题是如果你打开页面移动模拟器（就像在这个模拟器上）[ http://mobiletest.me/google_nexus_7_emulator/?u=http://firatabak.com/test/tur_detay.html]通常菜单必须显示当我向下滚动页面但它不是。

JS代码

 var navOffset = jQuery(".after-scroll-sticky").offset().top; jQuery(window).scroll(function(){ var scrollPosition = jQuery(window).scrollTop(); if(scrollPosition >= navOffset){ jQuery(".sticky-navbar").fadeIn().addClass("fixed"); }else{ jQuery(".sticky-navbar").fadeOut().removeClass("fixed"); } }); if ($(window).width() = navOffset2){ $(".sticky-navbar").addClass("fadeOutRightBig"); $(".menu-btn").fadeIn("fast"); }else{ $(".sticky-navbar").removeClass("fadeOutRightBig"); $(".menu-btn").fadeOut("slow"); } }); } 

Answer 1

由于您在if语句中定义了第二个jQuery.scroll函数，因此只有在脚本运行时窗口宽度小于768px时才会变为活动状态 – 在调整窗口大小时它不会启动。 相反，你可以尝试这种格式：

 jQuery(window).scroll(function(){ if ($(window).width() < 768) { // calculations and animation go here } }); 

或者更好的是，将两个jQuery.scroll函数组合在一起：

 jQuery(window).scroll(function(){ var navOffset = jQuery(".after-scroll-sticky").offset().top, scrollPosition = jQuery(window).scrollTop(); if ($(window).width() < 768) { if (scrollPosition >= navOffset + 200) { // ... } else { // ... } else if (scrollPosition >= navOffset) { // ... } else { // ... } }); 

然后，只需确保在应用新更改之前撤消其他情况下所做的更改。