DOM 更改上的 Twitter 引导更改附加偏移量答案

【问题标题】：Twitter bootstrap change affix offset on DOM changeDOM 更改上的 Twitter 引导更改附加偏移量
【发布时间】：2013-02-16 23:28:36
【问题描述】：

Twitter bootstrap change affix offset 可能会有所帮助。据说他基本上有同样的问题并发布了我的问题的解决方案，但不幸的是我无法让它工作。

这里是 Bootstrap Affix 插件页面（如果你知道另一种/比使用这个插件更好的方法，我很乐意——这个插件不是必需的）：http://twitter.github.com/bootstrap/javascript.html#affix

http://jsfiddle.net/rPsK8/1

这是一个有助于显示我的问题的小提琴......但由于某种原因我无法让 Bootstrap Affix 做任何事情。 :|

$(function () {
  $('#contentbody-toolbar').addClass("affix-top").each(function (){
    var $self = $(this);
    if ($("#advanced-total-outer").is(":visible")) {
    var offsetFn = function () {
        var $p = $('#advanced-total-outer').outerHeight();
        var h = 175 + $p;
        return h;
    }
    $self.affix({offset: {top: offsetFn}});
 } else {
    var offsetFn = function () {
        var h = 175;
        return h;
    }
    $self.affix({offset: {top: offsetFn}});
}
  });
});

编辑：我将上面的代码简化为（应该做同样的事情）：

$(function () {
  $('#contentbody-toolbar').addClass("affix-top").each(function (){
    var $self = $(this);
     var offsetFn = function () {
        var $p = $('.wrapper.clearfix.no-bord').outerHeight();
        var h = 175 + $p;
        return h;
    $self.affix({offset: {top: offsetFn}});
};
  });
});

但无论如何，这就是我的页面的基本设置方式，当您向下滚动并且导航栏（#contentbody-toolbar）位于窗口顶部时，它会修复它。现在，问题是，如您所见，我隐藏了一个可以取消隐藏的 div。因此，当该元素没有以某种方式隐藏时，我需要更新偏移量。

如果用户愿意，标题也可以更改大小（高度），因此它也需要为此进行更新。我在上面发布的代码对我来说似乎是合乎逻辑的，并且它似乎在识别偏移量变化的意义上“工作”，但是如果有意义的话，附加插件显然不会更新 DOM 中的变化。滚动 175px 后总是固定的。

几天来，我一直在努力让它发挥作用，老实说，我很沮丧。我真的不知道该怎么做。提问时 Stackoverflow 的侧边栏似乎可以按我的意愿运行，但我找不到他们的 moveScroller 脚本。

感谢提供的任何帮助，非常感谢。

【问题讨论】：

标签： javascript jquery twitter-bootstrap fixed submenu

【解决方案1】：

所以，我注意到/提到了我想要的 stackoverflow 的作品......好吧，感谢 Josh Lee @How can I make a div stick to the top of the screen once it's been scrolled to?，我搜索并找到了他们的代码

使用了与他列出的几乎相同的代码：

function moveScroller() {
    var move = function() {
        var st = $(window).scrollTop();
        var ot = $("#scroller-anchor").offset().top;
        var s = $("#scroller");
        if(st > ot) {
            s.css({
                position: "fixed",
                top: "0px",
                width: "61%"
            });
        } else {
            if(st <= ot) {
                s.css({
                    position: "relative",
                    top: "",
                    width: "auto"
                });
            }
        }
    };
    $(window).scroll(move);
    move();
}

<script type="text/javascript"> 
  $(function() {
    moveScroller();
  });
</script>

【讨论】：