jQueryの - 指定された上部または下部の余白

Question

で停止スクロール上のdivに続いて、私はこのjsfiddleを持っている：https://jsfiddle.net/3ncyxnzt/

それは現在限りはいつものようにページの最上部から、指定されたマージンで停止し、私は」うまく機能それがフッタの下または上に来る前に、の底面で停止するようにします。その移動する赤いボックスを緑色のフッターの上に停止させる方法に関するアイデアはありますか？フッタの高さは1000pxなので、移動するボックスを何とか1000pxで停止するように設定する必要があります。ここで

は私が持っているコードは、これまでです：

(function(jQuery) { 
    var element = jQuery('.move'), 
     originalY = element.offset().top; 

    var topMargin = 110; 

    element.css('position', 'relative'); 

    jQuery(window).on('scroll', function(event) { 
     var scrollTop = $(window).scrollTop(); 

     element.stop(false, false).animate({ 
      top: scrollTop < originalY 
        ? 0 
        : scrollTop - originalY + topMargin 
     }, 200); 
    }); 
})(jQuery); 

Answer 1

私は、静的な値290を追加することにより、以下の行を変更し、それが底まで達しました。

scrollTopスプライト - もともと+ TOPMARGIN + 290

Answer 2

これはあなたがachiveしようとは何ですか？

(function(jQuery) { 
    var element = $('.move'), 
    originalY = element.offset().top, 
    otherDiv = 1000, 
    staticHeight = $('.other-div').height()-$(element).height(); // Fixed number to stop the move-element      before the footer 

    var topMargin = 110; 

    jQuery(window).on('scroll', function(event) { 
     var offset = element.offset().top; 
     var scrollTop = $(window).scrollTop(); 

     // Check if the move-block gets under the footerblock 
     if(scrollTop < otherDiv){ 
      element.stop(false, false).animate({ 
       top: scrollTop - originalY + topMargin 
      }, 200); 
     }else{ 
     element.stop(false, false).animate({ 
      top: staticHeight //If so, make sure it gets on top of the footerblock staticly 
     }, 200); 
     } 
    }); 
})(jQuery); 

私はあなたが、ブロックが「他のdiv」と呼ばれるdiv要素の高さの後ろに取得するかどうかを確認するためのif/else文が必要だと思います。

ここで働くの例を参照してください：https://jsfiddle.net/crix/z578c9bo/

はそれが役に立てば幸い！