Question

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，可以取消隐藏。所以当需要以某种方式隐藏该元素时，我需要更新偏移量。

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

我一直试图让这个工作好几天，说实话，我很沮丧。我真的不知道该怎么做。在提问时，Stackoverflow的侧边栏看起来像我想要的功能但我找不到moveScroller的脚本。

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

Answer 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>

Twitter引导程序更改DOM更改的附加偏移量

1 个答案: