jqueryドキュメントスクロールしないスクロール

Question

私は自分のサイト上にある一定のポイントに達すると機能を結びつけようとしている固定ナビゲーションバーを持っています。私は3つのサイトの前にこれを3回成功させましたが、私の人生ではこのサイトで作業することはできません。

のjQuery：

function startchange() { 
$('#ajax-frame').imagesLoaded().done(function(instance) { 
    var scroll_start = 0; 
    var startchange = $('.startchange'); 
    var offset = startchange.offset(); 
    if (startchange.length) { 
     $(document).on('scroll', function() { 
      scroll_start = $(this).scrollTop(); 
      if (scroll_start > offset.top) { 
       $('nav').addClass('active'); 
       console.log("startchange working"); 
      } else { 
       $('nav').removeClass('active'); 
      }; 
     }); 
    } 
}); 
}; 

CSS：

body, 
html { 
height: 100% !important; 
width: 100%; 
margin: 0; 
padding: 0; 
overflow-x: hidden; 
} 

2日間完全に困惑コードここに... - 私は、ページが完全にロードされ知っているので、関数が用意ウィンドウに包まれて

この不満足な問題を理解していただきありがとうございます。

Answer 1

あなたのCSSからoverflow-x: hidden;を削除することが問題の解決に役立つ簡単なアプローチです。デモ：ここhttps://jsfiddle.net/mrlew/ce8me3qk/

しかしがを何が起こっているかです：あなたは、高さ100％にbodyとhtmlを設定している、一方が他方に重なっている（htmlタグはあまりにもブロック要素です）。高さ：100％に設定していますが、実際にはスクロールする内容はbodyで、window/documentではありません。あなたはインナー1をスクロールしているhttps://jsfiddle.net/mrlew/ce8me3qk/8/注：

証明：overflowscrollに設定する場合があり、両方のスクロールバーを見てください。したがって、$("document").on('scroll', function() {を$("body").on('scroll', function() {に変更すると、それも機能します。

htmlheight〜100%と設定しないでください。