Bootstrap动态调整大小

问题描述：

我有一个100％的高度div与它下面的导航和更多的内容。Bootstrap动态调整大小

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

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

下面的代码工作为：

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

然而，当我调整页面大小的偏移值不会被重新添加到偏移。

的页面高度下面的代码检查更改，然后给出了新的高度到数据偏移顶部，但它没有`函数affixChange（） {

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

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

为什么我的方法不工作？
有没有更好的方法来做到这一点？

答

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

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

答

引导给你的可能性，通过一个函数来计算动态偏移：

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

曾任职非常适合我！ –

在我的情况下，我在图像旋转木马之后有导航词缀，这要求我从返回的高度中减去一个 - '$（'。image-slider'）。height（） - 1'，否则会切换词缀在导航到第一个散列位置时开启和关闭属性。 – Andre

@domachine - 你是个传奇人物！ – edward

答

不幸的是，如果你需要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'); 
      } 
     }); 
    });

Bootstrap动态调整大小

相关推荐