Bootstrap3中的affix的使用Demo

Posted 2021-03-26 markjacobs

<div class="container">
    <div class="col-md-3">
        <ul class="list-group affixed-element-top js-affixed-element-top">
            <li class="list-group-item">hello</li>
            <li class="list-group-item">hello</li>
            <li class="list-group-item">hello</li>
            <li class="list-group-item">hello</li>
            <li class="list-group-item">hello</li>
        </ul>
    </div>
    <div class="col-md-6 js-content">
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
    </div>
    <div class="col-md-3">
        <ul class="list-group affixed-element-bottom js-affixed-element-bottom">
            <li class="list-group-item">hello</li>
            <li class="list-group-item">hello</li>
            <li class="list-group-item">hello</li>
            <li class="list-group-item">hello</li>
            <li class="list-group-item">hello</li>
        </ul>
    </div>
</div>

 

 

<script>
    // $(‘.collapse‘).collapse()
  $(function(){
     $(".js-affixed-element-top").affix({
        offset: {

        }
     });
     $(".js-affixed-element-bottom").affix({
      offset: {

      }
     });
  });
</script>

 

 

<style>
        .affixed-element-top.affix{
            top:10px
        }
        .affixed-element-top.affix-bottom{
            position: relative;
        }
        .affixed-element-bottom.affix{
            bottom:10px
        }
        .affixed-element-bottom.affix-bottom{
            position: relative;
        }

    </style>