javascript - How to add and remove a class on an element when Bootstraps Affix is affixed or not -

on dev page, scroll, green "sticky" nav scrolls , sticks top. when sticks top, class on ".sticky_cta" changes "affix-top" "affix" (using bootstrap affix plugin).

i'd add css class (called stickyoffset) element on page (.belowbrandnav) when sticky bar sticks, essentially. class bump down 60px text isn't hidden under "sticky nav" when click 1 of industry icons "jump" anchor.

this code make sticky bar stick, , change class "affix".

// make sub nav stick top $('.sticky_cta').each(function () {     if ($(this).hasclass('affix')) {         $('.belowbrandnav').addclass("stickyoffset");     } });  jquery(function ($) {     $(document).ready(function () {         $('.sticky_cta').affix({             offset: {                 top: $('.abovebrandnav').height() + 70             }         });     }); }); 

i tried code below , works if scroll bar top , refresh, it's not practical. i'd automatically without need refresh.

// make sub nav stick top //sticky bar product page jquery(function ($) {     $(document).ready(function () {         $('.sticky_cta').affix({             offset: {                 top: $('.abovebrandnav').height() + 70             }         });         $('.sticky_cta').each(function () {             if ($(this).hasclass('affix')) {                 $('.belowbrandnav').addclass("stickyoffset");             }         });     }); }); 

am on right track, or approaching wrong?

you'll want tie events bootstrap provides affix.

try this:

$(document).ready(function () {     $('.sticky_cta').affix({         offset: {top: $('.abovebrandnav').height() + 70}     }).on('affix.bs.affix', function () {         $('.belowbrandnav').addclass("stickyoffset");     }).on('affix-top.bs.affix', function () {         $('.belowbrandnav').removeclass("stickyoffset");     }); }); 

take at bootply demo. made change color of 'bootply' text in navbar. scroll, , can see adds class when scrolling pane, , removes when it's not.

on side note, bootstraps event naming far less intuitive plugin :p