Halten Sie div vom folgenden Bildlauf ab, bevor es die Fußzeile erreicht.

Question

Ich habe das folgende Skript verwendet, um ein div auf meiner Seite nach unten zu bewegen, während die Seite scrollt.

Dies ist das Skript:

(function($) { 
    var element = $('.follow-scroll'), 
     originalY = element.offset().top; 

    // Space between element and top of screen (when scrolling) 
    var topMargin = 105; 

    // Should probably be set in CSS; but here just for emphasis 
    element.css('position', 'relative'); 

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

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

Dies ist die Seite: http://www.wedoblogging.com/faqs/ (U: wedoblogging P: cadb7b6c)

Wie Sie, die schwebende div sehen können (mit dem Titel: Fragen Sie uns) hält floating In den Fußbereich möchte ich, dass dieser div aufhört, der Schriftrolle zu folgen, bevor er den grünen Balken über der Fußzeile erreicht.

Vielen Dank im Voraus für jede Hilfe!

Answer 1

Ähnlich zu dieser Regel

top: scrollTop < originalY ? 0 : /*following code*/; 

Sie eine weitere Regel hinzufügen, dass die maximale Position enthält erlaubt:

var nextPosition = scrollTop - originalY + topMargin; 
var maxPositionAllowed = 450; 
top: scrollTop < originalY ? 0 : Math.min(nextPosition, maxPositionAllowed) 

Also, wenn das Element versucht maxPostionAllowed zu gehen unten, werden Sie es zwingen, habe diese Entfernung von oben. Ich bin mir nicht sicher, ob 450 der Wert ist, den Sie wollen, aber Sie können ein paar verschiedene sehen, wie es aussieht.

So ist es etwa so aussehen würde:

(function($) { 
    var element = $('.follow-scroll'), 
     originalY = element.offset().top; 

    // Space between element and top of screen (when scrolling) 
    var topMargin = 105; 

    // Should probably be set in CSS; but here just for emphasis 
    element.css('position', 'relative'); 

    $(window).on('scroll', function(event) { 
     var scrollTop = $(window).scrollTop(); 
     var nextPosition = scrollTop - originalY + topMargin; 
     var maxPositionAllowed = 450; 

     element.stop(false, false).animate({ 
      top: scrollTop < originalY ? 0 : Math.min(nextPosition, maxPositionAllowed) 
     }, 300); 
    }); 
})(jQuery);