固定导航栏问题后调整到页面 [英] fixed navbar issue after resize to page

问题描述

，但出现后如果我调整到窗口，如果我滚动页面后，看不到我的固定菜单

和另一个问题是如果你打开页面移动模拟器（像这个模拟器）[ 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 ; 
} 
}）; 
 
 if（$（window）.width（）<768）{
 var navOffset2 = jQuery（。after-scroll-sticky）。 
 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）; 
} 
} ; 
} 
  

解决方案

在if语句中的第二个 jQuery.scroll 函数，只有当脚本运行时窗口宽度小于768像素时，它才会变为活动状态 - 窗口已调整大小。您可以尝试这种格式：

  jQuery（window）.scroll（function（）{
 if（$ window）.width（）< 768）{
 //计算和动画到这里
} 
}）; 
  

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

  jQuery（window）.scroll（function（）{
 
 var navOffset = jQuery（。after-scroll-sticky）。offset（）。top，
 scrollPosition = jQuery（window）.scrollTop（）; 
 
 if （）< 768）{
 if（scrollPosition> = navOffset + 200）{
 // ... 
} else {
 // ... 
} 
 else if（scrollPosition> = navOffset）{
 // ... 
} else {
 // ... 
} 
 
}）; 
  

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

I have a page if you click you are gonna see demo page and there is a fixed menu which is hidden.

after scroll page to down you'll see fixed menu set as display:block as you see on image: but after appear if I'm resizing to window and if I turn normal desktop mode after scroll page to up as you see my fixed menu is not hiding

and another problem is if you open page mobile emulator (like on this emulator)[http://mobiletest.me/google_nexus_7_emulator/?u=http://firatabak.com/test/tur_detay.html] normally menu has to be show when I scroll page to down but it's not.

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");
                        }
                 });
        }

解决方案

Since you're defining the second jQuery.scroll function within an if statement, it only becomes active if the window width is less than 768px at the moment the script runs - it doesn't kick in when the window is resized. Instead you could try this format:

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

Or better yet, combine the two jQuery.scroll functions together:

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 {
        // ...
    }

});

Then just make sure that you're undoing the changes made in other cases before applying the new changes.

这篇关于固定导航栏问题后调整到页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！