<style>
/* Test Styles */
- .affix {
+ .affixed-element-top.affix {
top: 10px;
}
- .affix-bottom {
+ .affixed-element-top.affix-bottom {
position: absolute;
}
+ .affixed-element-bottom {
+ margin-bottom: 0;
+ }
+ .affixed-element-bottom.affix {
+ bottom: 10px;
+ }
+ .affixed-element-bottom.affix-bottom {
+ position: relative;
+ }
+ .grow-btn, .shrink-btn {
+ color: #FFF;
+ }
+ .grow-btn {
+ background-color: #2ECC40;
+ }
+ .grow-btn:hover {
+ background-color: #3D9970;
+ }
+ .shrink-btn {
+ background-color: #FF4136;
+ }
+ .shrink-btn:hover {
+ background-color: #85144B;
+ }
</style>
</head>
<body>
</div>
<div class="col-md-3">
- <ul class="list-group js-affixed-element">
+ <ul class="list-group affixed-element-top js-affixed-element-top">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
</ul>
</div>
- <div class="col-md-9">
+ <div class="col-md-6 js-content">
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
+ <div class="col-md-3">
+ <ul class="list-group affixed-element-bottom js-affixed-element-bottom">
+ <li class="list-group-item">Sit necessitatibus aspernatur.</li>
+ <li class="list-group-item">Adipisicing alias dolor!</li>
+ <li class="list-group-item">Ipsum molestiae impedit.</li>
+ <li class="list-group-item">Amet quis iste?</li>
+ <li class="list-group-item">Ipsum quaerat porro.</li>
+ <li class="list-group-item">Elit lorem libero.</li>
+ <li class="list-group-item">Ipsum dolore facilis.</li>
+ <li class="list-group-item">Elit ad atque.</li>
+ <li class="list-group-item">Dolor amet sequi!</li>
+ <li class="list-group-item">Consectetur voluptatum facilis!</li>
+ <li class="list-group-item">Sit neque eligendi?</li>
+ <li class="list-group-item">Amet fuga consectetur!</li>
+ <li class="list-group-item">Amet molestias repellat!</li>
+ <li class="list-group-item">Consectetur minima repellendus.</li>
+ <li class="list-group-item grow-btn js-grow-btn">Grow content</li>
+ <li class="list-group-item shrink-btn js-shrink-btn">Shrink content</li>
+ </ul>
+ </div>
+
<div class="col-md-12 js-footer">
<hr>
<!-- JavaScript Test -->
<script>
$(function () {
- $('.js-affixed-element').affix({
+ $('.js-affixed-element-top').affix({
offset: {
top: $('.js-page-header').outerHeight(true) - 10
, bottom: $('.js-footer').outerHeight(true) + 10
.on('affix.bs.affix', function (e) {
$(e.target).width(e.target.offsetWidth)
})
+
+ $('.js-affixed-element-bottom').affix({
+ offset: {
+ bottom: $('.js-footer').outerHeight(true) + 10
+ }
+ })
+
+ $('.js-grow-btn').on('click', function() {
+ $('.js-content').append('<p>Ipsum corrupti ipsam est temporibus.</p>')
+ })
+ $('.js-shrink-btn').on('click', function() {
+ $('.js-content p').last().remove()
+ })
})
</script>
</body>
projects / thirdparty / bootstrap.git / commitdiff
