Detect when an affixed element has returned to its original position

Question

How can I detect when a Bootstrap affixed element has returned to its starting position and is no longer affixed?

Answer 1

Updated answer: Apprrantly the Affix plugin comes with events to handle this sort of thing. An example from W3C Schools:

$(document).ready(function(){
    $('.nav').affix({offset: {top: 150} }); 
    $('.nav').on('affix-top.bs.affix', function(){
        alert('The navigation menu is about to return to its original top position - The .affix class is about to be replaced with .affix-top');
    });
});

There are other events as well, for instance affix-bottom.bs.affix that fires when the element returns to its bottom most postition.

Original answer: From W3C Schools:

The affix plugin toggles between three classes: .affix, .affix-top, and .affix-bottom. Each class represents a particular state. You must add CSS properties to handle the actual positions, with the exception of position:fixed on the .affix class.

So I guess you can do it like this:

$(window).scroll(function() {
    if($("#element").css("position") === "fixed") {
         //It is fixed.
    }
    else {
        //It is not fixed.
    }    
});

If you only want to execute code when the state changes, then keep a global variable that remembers the state. In the scroll event, check if the current state matches the global variable. If not, the state has changed.