javascript - 调整大小时不会重新计算附加位置

Question

我想让我的导航栏在您滚动时固定，即使您调整窗口大小，它也会到达顶部。

即使我将其设置为在 $(window).resize() 时重新计算值，触发它的位置也不会更新。怎么了？

$(document).ready ->
  $(window).resize ->

    windowHeight = $(window).height()
    navHeight = $('#navbar-affixable-wrapper > #navbar.affixable').outerHeight()
    windowMinusNavHeight = windowHeight - navHeight

    $('#navbar-affixable-wrapper > #navbar.affixable').affix
      offset: { top: windowMinusNavHeight }

或者在 JavaScript 中:

$(document).ready(function() {
  return $(window).resize(function() {
    var navHeight, windowHeight, windowMinusNavHeight;
    windowHeight = $(window).height();
    navHeight = $('#navbar-affixable-wrapper > #navbar.affixable').outerHeight();
    windowMinusNavHeight = windowHeight - navHeight;

    return $('#navbar-affixable-wrapper > #navbar.affixable').affix({
      offset: {
        top: windowMinusNavHeight
      }
    });
  });
});

Answer 1

你能以函数的形式返回偏移顶部值吗？

例如:

$(function(){

   var $window = $( window );
   var $navbar = $('#navbar-affixable-wrapper > #navbar.affixable');

   $navbar.affix({
      offset: {
        top: function(){
           // Calculate offset top value
           return $window.height() - $navbar.outerHeight( true ); // I always pass true in there so margin is taken into consideration.
        }
      }
    })
});

您可以查看affix documentation在 Bootstrap 网站上。