Question

我在这里有一个jsfiddle https://jsfiddle.net/okiewardoyo/twkthn44/2/
那小提琴很完美。 bootstrap附加工作使用data-offset-top和data-offset-bottom 我的问题是，如果我的标题和页脚是动态的，那该怎么办？这两者的高度总是在每页上改变
现在，我使用手动高度作为词缀。

data-spy="affix" data-offset-top="100" data-offset-bottom="600"

如何使用jquery来计算我的页眉高度和页脚高度，以及如何实现它来使词缀工作？感谢

Answer 1

for affix我以这种方式动态设置

$('#sidebar-affix').affix({
      offset: {
        top: $('.navbar').height(),
        bottom: function () {
          return (this.bottom = $('.footer-section').outerHeight(true) + 50)
        }
      }
});

************** UPDATE **************

看着你的小提琴尝试这些变化

的javascript

$('#nav1').affix({
    offset: {
        top: $('header').height(),
        bottom: function () {
            return (this.bottom = $('footer').outerHeight(true) + 50)
        }
    }
});

html（删除data-spy="affix"）

<ul id="nav1" class="nav nav-pills nav-stacked">
    <li><a href="#">Section One</a></li>
    <li><a href="#">Section Two</a></li>
    <li><a href="#">Section Three</a></li>
</ul>

CSS

@media (min-width: 979px) {
    #nav1.affix-bottom {
        position: relative;
        margin-top:25px;
    }

    #nav1.affix-top {
        position: static;
        margin-top:25px;
    }

    #nav1.affix {
        position: fixed;
        top:25px;
    }
}

#nav1.affix-top{
    position:static;
}

#nav1.affix-bottom {
    position: relative 
}

@media没有必要，但你明白了。

这是您更新的fiddle

Bootstrap Affix - 如何使用jquery制作boostrap词缀？

1 个答案: