Question

在此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");
            }
        });
    });
});

我是在正确的轨道上，还是接近这个错误？

Answer 1

你想要加入events that bootstrap provides for affix。

试试这个：

class Post < ActiveRecord::Base
def self.search(search)
  where("name LIKE ?", "%#{search}%") 
end

end

看看at this bootply demo。我让它改变了导航栏中“Bootply”文本的颜色。滚动，您可以看到它在滚动窗格时添加了类，并在不滚动时将其删除。

另一方面，我会说bootstraps事件命名远不如此插件直观：P

Answer 2

您可以将处理程序绑定到文档的scroll事件：

$(document).on('scroll', function() {
    $('.sticky_cta').each(function(){
        if($(this).hasClass('affix')) {
            $('.belowbrandnav').addClass("stickyoffset");
        } 
    });
});

如何在附加Bootstraps Affix时添加和删除元素上的类

2 个答案: