Bootstrap 词缀重置不起作用 [英] Bootstrap affix reset not works

问题描述

我正在尝试在引导程序中实现一个词缀.这应该不是问题，但我想让它响应.

I am trying to implement an affix in bootstrap. It shouldn't be a problem, but I want to make it responsive.

当页面调整大小时，一些元素会隐藏在页面顶部，并且由于宽度的变化，我需要重新设置词缀并设置到新位置.

When a page has resized, some elements will hide at the top of the page, and because of change of width, I need to reset the affix and set to the new position.

我只是搜索它，并找到了一个接受的解决方案，但它似乎不起作用.

I just search for it, and found an accepted solution, but it seems, it is not works.

这是我试过的:

$(window).off('#myAffix');
$('#myAffix').removeData('bs.affix').removeClass('affix affix-top affix-bottom');
$('#myAffix').affix({
    offset: {
        top: function () {
            console.log('Offset top from: ' + $('.navbar').offset().top);
            return (this.top = $('.navbar').offset().top);
        }
    }
});

我在 document.ready 和 window.resize 事件上调用它.

I am calling it on document.ready, and on window.resize events.

我为它创建了一个演示.这是步骤，如何重现问题:

I've created a demo for it. This is the steps, how you can reproduce the problem:

• 当你打开它时，在边框词缀前有 2 列时调整结果窗口的大小，然后重新加载页面.当您向下滚动时，您会看到，词缀是在需要时开始工作.

• When you open it, resize the reult window while there are 2 columns before the bordered affix, and reload the page. When you scroll down, you will see, the affix is starts to work when it need.

调整窗口大小，只保留左列.词缀现在也有效.

Resize the window while only the left column remains. Affix is works now also.

再次调整窗口大小，同时出现右列.现在词缀会触发，当它到达前一个位置时，左列的高度.这很糟糕.

Resize the window again, while the right column appears. Now affix will trigger, when it reach the previous position, the height of the left column. That is bad.

看来，我的代码正在运行，但对词缀没有影响.

It seems, my code is running, but has no effect on affix.

PS:不关心词缀的位置，我只想修复，什么时候/哪里会修复.

PS: Do not care about the position of the affix, I just want to fix, when / where it will be fixed.

jsFiddle 在这里.

推荐答案

你只需要做一个改变就可以让你的代码如你所愿，这就是改变 $(window).off('#myAffix'); 到 $(window).off('.affix');

There is only one change you need to do for your code to work as you wish, and this is to change the $(window).off('#myAffix'); to $(window).off('.affix');

这是新功能:

$.myFunction = function() {
    $(window).off('.affix')
    $('#myAffix').removeData('bs.affix').removeClass('affix affix-top affix-bottom');
    $('#myAffix').affix({
        offset: {
            top: function() {
                console.log('Offset top from: ' + $('.navbar').offset().top);
                return (this.top = $('.navbar').offset().top);
            }
        }
    });
};

这篇关于Bootstrap 词缀重置不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！