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

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

在调整大小时不会重新计算词缀位置

1 个答案: