浮动侧边栏运行到页脚

我有一个简单的单页网站内置的Bootstrap中有一个浮动边栏。除了某些屏幕尺寸以外，一切工作都很好，边栏运行到页面底部的底部和页脚。一旦它遇到页面底部的某个部分，我该如何停止它？有抵消？浮动侧边栏运行到页脚

这里是我的JS文件：

$(document).ready(function() { 

    /* activate sidebar */ 
    $('#sidebar').affix({ 
    offset: { 
     top: 400 
    } 
    }); 

    /* activate scrollspy menu */ 
    var $body = $(document.body); 
    var navHeight = $('.navbar').outerHeight(true) + 10; 

    $body.scrollspy({ 
    target: '#leftCol', 
    offset: navHeight 
    }); 

    /* smooth scrolling sections */ 
    $('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 
     if (target.length) { 
     $('html,body').animate({ 
      scrollTop: target.offset().top - 50 
     }, 1000); 
     return false; 
     } 
    } 
    }); 

});

Here's网站。

来源

2016-08-26 Drew Stanley

你能上的jsfiddle或[bootply（http://bootply.com/new）创建一个可重复的，小例子？它似乎在外部网站上工作正常 – ZimSystem

你在看什么浏览器大小？它看起来很好，但任何中等大小（如MacBook）或更小，它开始有这个问题。 –

使用词缀offset.bottom。它应该设置为页脚的高度以及侧边栏和页脚之间的空间的一些额外填充。

var headerHeight = $('header').outerHeight(true); // true value, adds margins to the total height 
 
var footerHeight = $('footer').outerHeight() + 60; 
 
$('#account-overview-container').affix({ 
 
    offset: { 
 
    top: headerHeight, 
 
    bottom: footerHeight 
 
    } 
 
}).on('affix.bs.affix', function() { // before affix 
 
    $(this).css({ 
 
    /*'top': headerHeight,*/ // for fixed height 
 
    'width': $(this).outerWidth() // variable widths 
 
    }); 
 
});

body { 
 
    position: relative; 
 
} 
 
header, 
 
footer { 
 
    background: #ccc; 
 
    padding: 40px 0; 
 
    text-align: center; 
 
} 
 
header { 
 
    margin-bottom: 10px; 
 
} 
 
#account-overview-container.affix { 
 
    position: fixed; 
 
    top: 10px 
 
} 
 
.affix-top { 
 
    position: static; 
 
} 
 
.affix-bottom { 
 
    position: absolute; 
 
    bottom: auto !important; 
 
} 
 
footer { 
 
    padding: 10px 0; 
 
} 
 
footer h1 { 
 
    margin-top: 0; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 

 
<header> 
 
    <h1>This is the header</h1> 
 

 
</header> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> 
 
     <div class="well well-small affix-top" id="account-overview-container"> 
 
     <h4 class="no-top-margin">Customer Info</h4> 
 

 
     <ul class="account-info-list list-unstyled no-bottom-margin"> 
 
      <li><strong class="info-title" style="width: 78px;">Name:</strong> 
 
      <span class="info-data" style="width: 180px;">resold1 of reseller2</span> 
 
      </li> 
 
      <li><strong class="info-title" style="width: 78px;">Location:</strong> 
 
      <span class="info-data" style="width: 180px;"><em class="muted">N/A</em></span> 
 
      </li> 
 
      <li><strong class="info-title" style="width: 78px;">Local Time:</strong> 
 
      <time class="info-data" datestamp="1/1/0001 12:00:00 AM" title="12:00:00 AM" style="width: 180px;">12:00 AM</time> 
 
      </li> 
 
      <li><strong class="info-title" style="width: 78px;">Contact:</strong> 
 
      <span class="info-data" style="width: 180px;">first last</span> 
 
      </li> 
 
      <li><strong class="info-title" style="width: 78px;">Phone:</strong> 
 
      <span class="info-data" style="width: 180px;">8675309</span> 
 
      </li> 
 
      <li><strong class="info-title" style="width: 78px;">Mobile:</strong> 
 
      <span class="info-data" style="width: 180px;"><em class="muted">N/A</em></span> 
 
      </li> 
 
      <li> <strong class="info-title" style="width: 78px;">Email:</strong> 
 
      <span class="info-data" style="width: 180px;"><a href="mailto:[email protected]">[email protected]</a></span> 
 
      </li> 
 
     </ul> 
 
     <h4>Business Info</h4> 
 

 
     <ul class="account-info-list list-unstyled no-bottom-margin"> 
 
      <li> <strong class="info-title" style="width: 80px;">Website:</strong> 
 
      <span class="info-data" style="width: 178px;"><em class="muted">N/A</em></span> 
 
      </li> 
 
      <li> <strong class="info-title" style="width: 80px;">Industry:</strong> 
 
      <span class="info-data" style="width: 178px;"><em class="muted">N/A</em></span> 
 
      </li> 
 
      <li><strong class="info-title" style="width: 80px;">Employees:</strong> 
 
      <span class="info-data" style="width: 178px;">0</span> 
 
      </li> 
 
      <li> <strong class="info-title" style="width: 80px;">Ownership:</strong> 
 
      <span class="info-data" style="width: 178px;"><em class="muted">N/A</em></span> 
 
      </li> 
 
      <li><strong class="info-title" style="width: 80px;">Parent:</strong> 
 
      <span class="info-data" style="width: 178px;"><em class="muted">N/A</em></span> 
 

 
      </li> 
 
      <li> <strong class="info-title" style="width: 80px;">Source:</strong> 
 
      <span class="info-data" style="width: 178px;"><em class="muted">N/A</em></span> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> 
 
     <fieldset> 
 
     <legend>Recent Notes</legend> \t <a class="space-bottom btn btn-primary" href="#" role="button"><i class="icon-plus icon-white"></i> Create New Note</a> 
 

 
     <table class="table table-bordered"> 
 
      <colgroup> 
 
      <col> 
 
       <col style="width: 30%;"> 
 
      </colgroup> 
 
      <tbody> 
 
      <tr> 
 
       <td> 
 
       <h4>hah notes!</h4> 
 

 
       <p>I LOVE NOTES SOOOOOOOO MUCH!</p> 
 
       </td> 
 
       <td><span class="muted">Created on Mar 4, 2013 at 5:33 pm</span> 
 

 
       <br><span class="muted">Follow-Up on <span class="js-datetime-date">May 06, 2013</span> at <span class="js-datetime-time">12:16 pm</span> 
 

 
       <input class="js-datetime-ms" data-val="true" data-val-number="The field Follow-up Date must be a number." id="n_FollowUpDateTicksSinceEpochUTC" name="n.FollowUpDateTicksSinceEpochUTC" type="hidden" value="1367860578340"> 
 
       </span> 
 
       <br><span class="text-info">[email protected]</span> 
 

 
       <br>Type:<span class="label label-info">Billing</span> 
 

 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
       <h4>This is another note</h4> 
 

 
       <p>Adipisicing etsy beard, laborum odd future mlkshk incididunt artisan. Tattooed officia banh mi typewriter est. Excepteur carles twee flexitarian anim, you probably haven't heard of them vero disrupt odd future kale chips 3 wolf moon jean 
 
        shorts laboris fixie. Magna anim consequat, selvage messenger bag pariatur occaecat you probably haven't heard of them tonx echo park fashion axe. Skateboard enim voluptate before they sold out artisan. Etsy single-origin coffee pickled, 
 
        ut meggings craft beer meh PBR mollit terry richardson trust fund tempor. American apparel pop-up wes anderson odio, ea blue bottle meggings laboris dolor.</p> 
 
       </td> 
 
       <td> \t <span class="muted">Created on Mar 5, 2013 at 2:14 pm</span> 
 

 
       <br> \t <span class="muted"> 
 
\t \t \t \t \t \t \t \t \t Follow-Up on <span class="js-datetime-date">Sep 06, 2013</span> at <span class="js-datetime-time">2:47 pm</span> 
 

 
       <input class="js-datetime-ms" id="n_FollowUpDateTicksSinceEpochUTC" name="n.FollowUpDateTicksSinceEpochUTC" type="hidden" value="1378496859780"> 
 
       </span> 
 
       <br> \t <span class="text-info">[email protected]</span> 
 

 
       <br>Type: \t <span class="label label-info">Care</span> 
 

 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
       <h4>banjo enim skateboard</h4> 
 

 
       <p>Tonx direct trade butcher dolor, letterpress lo-fi kogi adipisicing locavore ad. VHS ut flannel readymade et. Helvetica cray cliche semiotics craft beer tonx. Placeat bushwick sustainable exercitation, ea banjo Austin art party raw denim. 
 
        Aute cillum helvetica umami mustache, forage ex pickled quinoa portland terry richardson sint duis. Messenger bag pour-over ut, tempor +1 fugiat irony pickled Austin yr placeat locavore literally ethical cupidatat. Est banksy meh, officia 
 
        carles kogi culpa viral hella nihil chambray lo-fi.</p> 
 
       </td> 
 
       <td> \t <span class="muted">Created on Mar 5, 2013 at 2:16 pm</span> 
 

 
       <br> \t <span class="muted"> 
 
\t \t \t \t \t \t \t \t \t Follow-Up on <span class="js-datetime-date">Jul 06, 2014</span> at <span class="js-datetime-time">1:35 pm</span> 
 

 
       <input class="js-datetime-ms" id="n_FollowUpDateTicksSinceEpochUTC" name="n.FollowUpDateTicksSinceEpochUTC" type="hidden" value="1404671721721"> 
 
       </span> 
 
       <br> \t <span class="text-info">[email protected]</span> 
 

 
       <br>Type: \t <span class="label label-info">Billing</span> 
 

 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
       <h4>This is another note</h4> 
 

 
       <p>Adipisicing etsy beard, laborum odd future mlkshk incididunt artisan. Tattooed officia banh mi typewriter est. Excepteur carles twee flexitarian anim, you probably haven't heard of them vero disrupt odd future kale chips 3 wolf moon jean 
 
        shorts laboris fixie. Magna anim consequat, selvage messenger bag pariatur occaecat you probably haven't heard of them tonx echo park fashion axe. Skateboard enim voluptate before they sold out artisan. Etsy single-origin coffee pickled, 
 
        ut meggings craft beer meh PBR mollit terry richardson trust fund tempor. American apparel pop-up wes anderson odio, ea blue bottle meggings laboris dolor.</p> 
 
       </td> 
 
       <td> \t <span class="muted">Created on Mar 5, 2013 at 2:14 pm</span> 
 

 
       <br> \t <span class="muted"> 
 
\t \t \t \t \t \t \t \t \t Follow-Up on <span class="js-datetime-date">Sep 06, 2013</span> at <span class="js-datetime-time">2:47 pm</span> 
 

 
       <input class="js-datetime-ms" id="n_FollowUpDateTicksSinceEpochUTC" name="n.FollowUpDateTicksSinceEpochUTC" type="hidden" value="1378496859780"> 
 
       </span> 
 
       <br> \t <span class="text-info">[email protected]</span> 
 

 
       <br>Type: \t <span class="label label-info">Care</span> 
 

 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
       <h4>banjo enim skateboard</h4> 
 

 
       <p>Tonx direct trade butcher dolor, letterpress lo-fi kogi adipisicing locavore ad. VHS ut flannel readymade et. Helvetica cray cliche semiotics craft beer tonx. Placeat bushwick sustainable exercitation, ea banjo Austin art party raw denim. 
 
        Aute cillum helvetica umami mustache, forage ex pickled quinoa portland terry richardson sint duis. Messenger bag pour-over ut, tempor +1 fugiat irony pickled Austin yr placeat locavore literally ethical cupidatat. Est banksy meh, officia 
 
        carles kogi culpa viral hella nihil chambray lo-fi.</p> 
 
       </td> 
 
       <td> \t <span class="muted">Created on Mar 5, 2013 at 2:16 pm</span> 
 

 
       <br> \t <span class="muted"> 
 
\t \t \t \t \t \t \t \t \t Follow-Up on <span class="js-datetime-date">Jul 06, 2014</span> at <span class="js-datetime-time">1:35 pm</span> 
 

 
       <input class="js-datetime-ms" id="n_FollowUpDateTicksSinceEpochUTC" name="n.FollowUpDateTicksSinceEpochUTC" type="hidden" value="1404671721721"> 
 
       </span> 
 
       <br> \t <span class="text-info">[email protected]</span> 
 

 
       <br>Type: \t <span class="label label-info">Billing</span> 
 

 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
       <h4>This is another note</h4> 
 

 
       <p>Adipisicing etsy beard, laborum odd future mlkshk incididunt artisan. Tattooed officia banh mi typewriter est. Excepteur carles twee flexitarian anim, you probably haven't heard of them vero disrupt odd future kale chips 3 wolf moon jean 
 
        shorts laboris fixie. Magna anim consequat, selvage messenger bag pariatur occaecat you probably haven't heard of them tonx echo park fashion axe. Skateboard enim voluptate before they sold out artisan. Etsy single-origin coffee pickled, 
 
        ut meggings craft beer meh PBR mollit terry richardson trust fund tempor. American apparel pop-up wes anderson odio, ea blue bottle meggings laboris dolor.</p> 
 
       </td> 
 
       <td> \t <span class="muted">Created on Mar 5, 2013 at 2:14 pm</span> 
 

 
       <br> \t <span class="muted"> 
 
\t \t \t \t \t \t \t \t \t Follow-Up on <span class="js-datetime-date">Sep 06, 2013</span> at <span class="js-datetime-time">2:47 pm</span> 
 

 
       <input class="js-datetime-ms" id="n_FollowUpDateTicksSinceEpochUTC" name="n.FollowUpDateTicksSinceEpochUTC" type="hidden" value="1378496859780"> 
 
       </span> 
 
       <br> \t <span class="text-info">[email protected]</span> 
 

 
       <br>Type: \t <span class="label label-info">Care</span> 
 

 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
       <h4>banjo enim skateboard</h4> 
 

 
       <p>Tonx direct trade butcher dolor, letterpress lo-fi kogi adipisicing locavore ad. VHS ut flannel readymade et. Helvetica cray cliche semiotics craft beer tonx. Placeat bushwick sustainable exercitation, ea banjo Austin art party raw denim. 
 
        Aute cillum helvetica umami mustache, forage ex pickled quinoa portland terry richardson sint duis. Messenger bag pour-over ut, tempor +1 fugiat irony pickled Austin yr placeat locavore literally ethical cupidatat. Est banksy meh, officia 
 
        carles kogi culpa viral hella nihil chambray lo-fi.</p> 
 
       </td> 
 
       <td> \t <span class="muted">Created on Mar 5, 2013 at 2:16 pm</span> 
 

 
       <br> \t <span class="muted"> 
 
\t \t \t \t \t \t \t \t \t Follow-Up on <span class="js-datetime-date">Jul 06, 2014</span> at <span class="js-datetime-time">1:35 pm</span> 
 

 
       <input class="js-datetime-ms" id="n_FollowUpDateTicksSinceEpochUTC" name="n.FollowUpDateTicksSinceEpochUTC" type="hidden" value="1404671721721"> 
 
       </span> 
 
       <br> \t <span class="text-info">[email protected]</span> 
 

 
       <br>Type: \t <span class="label label-info">Billing</span> 
 

 
       </td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </fieldset> 
 
    </div> 
 
    </div> 
 
</div> 
 
<footer> 
 
    <h1>This is the footer</h1> 
 

 
    <h1>This is the footer</h1> 
 

 
    <h1>This is the footer</h1> 
 

 
    <h1>This is the footer</h1> 
 

 
    <h1>This is the footer</h1> 
 

 
    <h1>This is the footer</h1> 
 

 
    <h1>This is the footer</h1> 
 

 
    <h1>This is the footer</h1> 
 

 
</footer>

View Example on Bootply

来源

2016-08-26 19:24:06 ZimSystem

看起来像这个工作。谢谢！ –

浮动侧边栏运行到页脚

回答

相关问题