2016-06-10 84 views
2

我是使用此代碼爲加入一些動畫的導航欄jquery的窗口滾動事件不與溢出 - X隱藏

$(window).on("scroll", function() { 
    if ($(this).scrollTop() > 20) { 
     $('.top-menu .navbar').removeClass('remove-nav-move'); 
     $('.top-menu .navbar').addClass('nav-move'); 
    } else { 
     $('.top-menu .navbar').removeClass('nav-move'); 
     $('.top-menu .navbar').addClass('remove-nav-move'); 
    } 
}); 

然後右工作的i-加入一些CSS

html , body { 
    overflow-x: hidden; 
} 

.full-width-bar { 
    margin: 0 -9999rem; 
    /* add back negative margin value */ 
    padding: 0.25rem 9999rem; 
    background: rgba(0, 0, 0, 0.5); 
} 

overflow-x: hidden;對身體的破壞窗口滾動,所以請任何幫助解決這一問題或任何其他方式做到這一點,許多在此先感謝

回答

0

我沒有找到這方面的任何解決方案,所以我刪除overflow-x但在此之前,我試過,我最好的東西是

var up_wind = 0; 

$(window).bind("mousewheel DOMMouseScroll wheel", function (event, delta) { 
    console.log(delta); 
    if (delta>= 0 && delta != "undefined") { 
     if(up_wind != 0){ 
      up_wind--; 
      console.log('Scroll up'); 
      console.log(up_wind); 
     } 
    } 
    else if(delta != "undefined") { 
    if(up_wind >= 0) 
     up_wind++; 

     console.log('Scroll down'); 
     console.log(up_wind); 
    } 

    if(up_wind > 1){ 
     $('.top-menu .navbar').removeClass('remove-nav-move'); 
     $('.top-menu .navbar').addClass('nav-move'); 
    } else { 
     $('.top-menu .navbar').removeClass('nav-move'); 
     $('.top-menu .navbar').addClass('remove-nav-move'); 
    } 
}); 

希望將有所幫助。