Click Action Throwing Off Affix Plugin

Question

I'm using the bootstrap affix plugin (3.3.7) to affix a set of buttons. The problem I'm having is that the click event is throwing off the affix plugin. To test this, I have the following:

$("#MainSpySection")
.on("affix.bs.affix", function (e) {
   $.addLog("affix::affix");
})
.on("affixed.bs.affix", function (e) {
   $.addLog("affix::affixed");
})
.on("affix-top.bs.affix", function (e) {
   $.addLog("affix::affix-top");
})
.on("affixed-top.bs.affix", function (e) {
   $.addLog("affix::affixed-top");
});

The MainSpySection element is very simple:

<div id="MainSpySection" data-spy="affix" data-offset-top="0">
    <button type="submit" id="SaveButton" name="Action" value="SAVE" class="btn btn-default">Save</button>
</div>

I did add some custom CSS, but this shouldn't be impacting it:

.affix {
     top: 5px;
     -webkit-transition: all .5s ease-in-out;
     transition: all .5s ease-in-out;
     background-color: #d4dfed;
     border-color: #c2d2e5;
     padding:5px 20px;
     z-index:1000000
}

When I scroll down, this works great, and when I come to the top, the button resets great. However, every time that I click on anything (element or background), the MainSpySection element switches to scroll mode. Using my logging example above, I see these log statements:

affix::affixed
affix::affix
affix::affixed-top
affix::affix-top

Clicking on the document causes it to switch between affix and affix-top style settings, so the affixed element doesn't quite know what to do. Anybody experience this and know how to resolve it?

score 1 · Answer 1 · answered May 31 '18 at 19:06

After extensive research, I found a bug in the 3.3.7 version of the Affix plugin. In the "getState" method, there is this line:

if (offsetTop != null && this.affixed == 'top') return scrollTop < offsetTop ? 'top' : false

and the fix is to simply make the less-than a less-than-or-equal-to:

if (offsetTop != null && this.affixed == 'top') return scrollTop <= offsetTop ? 'top' : false

That solved the problem.

Click Action Throwing Off Affix Plugin

1 Answers1