调整页面

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 CODE

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

由于您在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 {
        // ...
    }

});

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