, wenn das Fenster gescrollt letztes Element

Question

Ich mag ein Kreis div im Header sperren, wenn der Benutzer scrollt in.

Ich verwende den folgenden Code, aber es funktioniert nicht

var circle$ = $('.circle'), 
    oCircleBottom = circle$.offset().top + circle$.outerHeight(true), 
    window$ = $(window); 

window$.scroll(function() { 
    if (window$.scrollTop() > oCircleBottom) { 

    } 
}.bind(this)); 

Ich möchte eine Aktion ausführen, wenn der Benutzer scrollt das Kreisdiv übergeben; Der obige Code scheint jedoch nicht zu funktionieren. Wird oCircleBottom korrekt berechnet?

Answer 1

Schliessen Sie Ihren Code in $ (document) .ready Funktion

$(document).ready(function() { 
    var circle$ = $('.circle'), 
    oCircleBottom = circle$.offset().top + circle$.outerHeight(true), 
    window$ = $(window); 

    window$.scroll(function() { 
    if (window$.scrollTop() > oCircleBottom) { 
     $('.circle').css({      
      position: 'fixed', 
      top: '0', 
      left: '0' 
     }); 
    } 
    else{ 
       $('.circle').css({      
       position: 'static'}); 
    } 
    }.bind(this)); 

}); 

Answer 2

Sie benötigen Fensterhöhe zu berücksichtigen, denn wenn die Höhe der Seite ist nicht genug, um nach unten zu scrollen, Ihr Code funktioniert nicht. Werfen Sie einen Blick auf this example

Wenn jedoch die Seitenhöhe erhöhen, funktionieren Sie Code ohne Subtrahieren der Fensterhöhe. Werfen Sie einen Blick auf this example

Daher ist es besser, die Fensterhöhe zu subtrahieren. jsFiddle

$(window).bind('scroll', function() { 

    if($(window).scrollTop() >= $('.circle').offset().top + $('.circle').innerHeight() - window.innerHeight) { 
     //Do you stuff 
    } 
});