Question

我创建了这个函数来计算我想要使用Bootstrap附加插件附加的菜单的偏移量和样式：

function MyAffix(options) {
  var e = options.element,
      eWidth = e.width(),
      eOffsetTop = e.offset().top;

  // Calculate offsets

  e.affix({
    offset: {
      top: function() {
        return (this.top = eOffsetTop - 40);
      },
      bottom: function() {
        return (this.bottom = $("footer").outerHeight(true));
      }
    }
  });

  // Apply styles

  e.on({

    "affixed.bs.affix": function() {
      $(this).css({
        "position": "fixed",
        "width": eWidth,
        "top": 40
      })
    },
    "affixed-top.bs.affix": function() {
      $(this).attr("style", "");
    }

  });

}

var uiMenuAffix = new MyAffix({element: $("#ui-menu")});

似乎工作正常。

我想要的是让它更新窗口调整大小的数据。我对JS比较陌生，所以我不确定我应该在哪里运行$（window）.resize（）函数以及我应该把它放在哪里。任何帮助，将不胜感激。感谢。

Answer 1

你可以这样做：

$(document).ready(function()
{
    $(window).resize(function()
    {
        returnUIMenuAffix();
    });
});


function returnUIMenuAffix()
{
    var uiMenuAffix = new MyAffix({element: $("#ui-menu")});
    return uiMenuAffix;
}

JSFIDDLE EXAMPLE

如何在窗口大小调整上运行Bootstrap附加功能

1 个答案: