固定导航栏发行后调整页面

Question

I have a page if you click you are gonna see demo page并且有一个隐藏的固定菜单。

后滚动页面下来你会看到固定的菜单，你看到的图像设置为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() < 768) { 
       var navOffset2 = jQuery(".after-scroll-sticky").offset().top+200; 
       jQuery(window).scroll(function(){ 
         var sP = jQuery(window).scrollTop(); 
         if(sP >= navOffset2){ 
          $(".sticky-navbar").addClass("fadeOutRightBig"); 
          $(".menu-btn").fadeIn("fast"); 
         }else{ 
          $(".sticky-navbar").removeClass("fadeOutRightBig"); 

          $(".menu-btn").fadeOut("slow"); 
         } 
       }); 
     } 

Answer 1

既然你定义内的第二jQuery.scroll功能if语句，它只有在窗口宽度小于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 { 
     // ... 
    } 

}); 

然后只是确保你申请的前撤销在其他情况下所做的更改新的变化。