jQuery fadeIn()特定のdiv HTMLセクションの先頭にあるとき

次のコードは、いくつかのことを行うことを意図しています:

1)現在のスクロール位置を見つける

2)各 .popup_next (サイトの各セクションに1つずつあり、各セクションは記事です)、親 article offsetTop を取得します。
3)スクロールの現在のスクロール位置がoffsetTopより大きく、 $ offsetHide より小さい場合は、 $ offsetHide で30pxを.offsetTop値に追加し、スクロール位置がその範囲外であれば .popup_next divを fadeOut()します。

申し訳ありませんが、より具体的な詳細が不足していますが、次のコードは上記の効果を達成するためのものです。私はjavascriptのコンソールの中でそれをチェックして、エラーはありません。残念ながら、構文にはエラーはないようですが、何も起こっていません。誰でも自分のコードでエラーを見つけることができますか?

下記参照:

*EDIT: Is there an error in using $(".popup_next").scroll(function() { where this function is not looking for a scroll on the whole window but rather only scrolling of the .popup_next element? *

*EDIT #2: Here is an example of the effect NOT working: http://jsfiddle.net/XG24G and here is an example of it working correctly when I remove the variables and make them simple static value (granted that $(this) is not used so it triggers for all erroneously): http://jsfiddle.net/UdXvM/1 *

$(window).scroll(function(){
       //gets the position of the window
          var y = $(window).scrollTop();

        $(".popup_next").scroll(function() {
            var $parentOffset = $(this).parent('article').offsetTop();
            var $hideOffset = $parentOffset + 30;
            if( y > ($parentOffset) && y < ($hideOffset) ) {
                $(this).fadeIn('350');}
            if( y > ($hideOffset) ) {
                $(this).fadeOut('500');}
            if( y < ($parentOffset) ) {
                $(this).fadeOut('500');}            
        });
});
0
これの例をjsfiddleに投稿していますか?答えは、それをしていない限りbelove。
追加された 著者 OptimusCrime,
これはデフォルトで display:none というCSSで隠されています。このエフェクトは、スクロール位置がte $ parentOffset $ hideOffset の間にある場合にのみトリガされます。
追加された 著者 Brian,
ここでは動作していないエフェクトの例を示します: jsfiddle.net/XG24G ここでは動作する例を示します変数を削除して単純な静的な値にすると($(this)が使用されていないので、すべてが間違ってトリガーされます): jsfiddle.net/UdXvM/1
追加された 著者 Brian,
fadeInの前にあなたの .popup_next は隠されていますか(または fadeOut )ですか?可視の要素にフェードインするだけで効果がないからです。
追加された 著者 Jean-Charles,

1 答え

$( "。popup_next")。scroll $( "。popup_next")。に変更します。つまり、そのコードは .popup_next 要素がスクロールされたとき、つまり overflow:auto; という要素があり、スクロールバーが表示され、その内容がスクロールしたときにのみ実行されます。ウィンドウがスクロールされたときに各 .popup_next に対してそのコードを実行させるには、 .each()が必要です。

Edit: Also, there is no .offsetTop() method. You want .offset().top.

http://jsfiddle.net/gilly3/Wcz3R/

Edit: Making this correction in your jsfiddle fixes it: http://jsfiddle.net/gilly3/XG24G/1/

1
追加された
@Brian - .offsetTop()メソッドはありません。私の編集を参照してください。
追加された 著者 gilly3,
それは私の最近の質問の編集後に私が考えていたものです。それを指摘していただきありがとうございますが、残念ながら私はまだ応答が返ってきています:(
追加された 著者 Brian,
ありがとう@ gilly3!私はそれがJSfiddleで動作しているのを見ましたが、私のローカル開発環境に実装すると、Google Chromeはエラーをスローしています: 6Uncaught TypeError:null(無名関数)script.jsのプロパティ 'top' extend.eachjq​​uery.min.js:2 e.fn.e.eachjq​​uery.min.js:2 bscript.js:5 f.event.handlejquery.min.js:3 f.event.add.i.handle.k
追加された 著者 Brian,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript