javascript - 固定或不固定Bootstraps Affix时如何在元素上添加和删除类

在此dev page上，随着滚动，绿色的"sticky"导航栏向上滚动并停留在顶部。当它停留在顶部时，".sticky_cta"上的类将从"affix-top"更改为"affix"（使用bootstrap affix插件）。

本质上，我想将CSS类（称为stickyoffset）添加到页面（.belowbrandnav）上的另一个元素上。此类会降低60px的所有内容，因此当您单击行业图标之一将"sticky nav"定位到锚点时，文本不会隐藏在"jump"下。

这是使粘性条粘住的代码，因此将类更改为"affix"。

// to make sub nav stick to 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
            }
        });
    });
});

我在下面尝试了此代码，如果我将栏滚动到顶部并然后刷新，它会起作用，因此显然不切实际。我希望它无需刷新即可自动执行。

// to make sub nav stick to 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");
            }
        });
    });
});

我是在正确的道路上，还是在走错路？

最佳答案

您需要将events that bootstrap provides附加到词缀上。

尝试这个：

$(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");
    });
});

看看at this bootply demo。我让它更改了导航栏中“引导”文本的颜色。滚动，您会看到它在使用窗格滚动时添加了该类，而在不滚动时将其删除了。

附带一提，我会说bootstraps事件的命名远不如这个插件直观：