调整大小时动态引导词缀

Question

我有一个 100% 高度的 div，它下面有一个导航，下面还有更多内容。

当用户滚动通过导航时，它会停留在页面顶部，当用户返回到 100% 高度的 div 时，导航会留在后面。

由于 div 的高度为 100%，导航的“data-offset-top”需要动态更改。

以下代码适用于此：

    $('#navigation').affix({
        offset: {
            top: $('#hero').height()
        }
    });

但是，当我调整页面大小时，偏移量的值不会被读取到偏移量。

以下代码检查页面高度是否发生变化，然后将新高度赋予 data-offset-top 但它没有 `function affixChange() {

     $('#navigation').attr('data-offset-top', $('#hero').height());
    $('#navigation').affix({
        offset: {
            top: $('#hero').height()
        }
    }); 
 }

affixChange();
setInterval(function(){
 affixChange();
console.log($('#hero').height());
}, 1000)

1. 为什么我的方法不起作用？
2. 有没有更好的方法来做到这一点？

Answer 1

Bootstrap 让您可以传递一个函数来动态计算偏移量：

$('#navigation').affix({
  offset: {
    top: function() { return $('#hero').height(); }
  }
});

Answer 2

不幸的是，如果您需要动态设置data-offset-top，您需要手动处理。虽然domachine 提供了正确的答案，但我想在这里提供一种重新计算页面大小调整值的方法，并添加一个空格保持器，以便粘贴运行顺利，例如贴上内容时不跳页。这对我来说是个问题。

• 动态重新计算data-offset-top
• 它动态设置偏移空间。加贴时空格会代替词缀

所以我使用以下 HTML：

<div class="my-affix" data-spy="affix" data-offset-top-dynamic="true" data-content-space-holder="#my-affix-space-holder"></div>
<div id="my-affix-space-holder"></div>

以下 CSS：

.my-affix + #my-affix-space-holder {
    display: none;
}
.my-affix.affix + #my-affix-space-holder {
    display: block;
}

还有一个 JS 脚本：

var $dynamicAffixes = $('[data-offset-top-dynamic]');
    $dynamicAffixes.each(function(){
        // data-target is used for the element that should be affixed while data-spy is used to have some scroll breakpoint
        var $thisAffix = $(this);
        var $thisAffixMarginPlaceholder = $($thisAffix.attr('data-content-space-holder'));
        var currentAffixHeight = $thisAffix.outerHeight();

        // Assign the affix height to content placeholder - to add a margin in the page because of missing content
        $thisAffixMarginPlaceholder.css('height', currentAffixHeight);

        // Initialize affix height where it should trigger to become sticky
        $thisAffix.affix({
            offset: {
                top: Math.round($(this).offset().top)
            }
        });

        $(window).on('resize', function(){
            var isAlreadyAffixed = false;

            // Restore affix to its original position if scrolled already so we can calculate properly
            if ($thisAffix.hasClass('affix')) {
                $thisAffix.removeClass('affix');
                isAlreadyAffixed = true;
            }

            var currentAffixPosition = Math.round($thisAffix.offset().top);
            var currentAffixHeight = $thisAffix.outerHeight();
            $thisAffix.data('bs.affix').options.offset.top = currentAffixPosition; // a hack
            $thisAffixMarginPlaceholder.css('height', currentAffixHeight);

            if (isAlreadyAffixed) {
                $thisAffix.addClass('affix');
                $thisAffix.affix('checkPosition');
            }
        });
    });

Answer 3

您是否尝试过监视窗口的大小调整事件？

    $(window).resize(function() {
  affixChange();
});