Question

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

当用户滚动传递导航时，它会粘到页面顶部，当用户返回到100％高度div时，导航会被留下。

当div为100％高度时，导航的'data-offset-top'需要动态变化。

以下代码适用于此：

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

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

以下代码检查要更改的页面高度，然后为data-offset-top提供新的高度，但它不是`函数affixChange（） {

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

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

为什么我的方法不起作用？
有更好的方法吗？

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

Bootstrap在调整大小时动态附加

3 个答案: