Fließende Seitenleiste in Fußzeile

Ich habe eine einfache Seite in Bootstrap gebaut, die eine schwebende Sidebar enthält. Alles funktioniert gut außer auf bestimmten Bildschirmgrößen, die Seitenleiste läuft in den unteren Bereich und die Fußzeile am unteren Rand der Seite. Wie bekomme ich es zu stoppen, sobald es einen bestimmten Teil des unteren Rands der Seite trifft? Mit einem Offset?Fließende Seitenleiste in Fußzeile

Hier ist meine JS-Datei:

$(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 die Website.

Quelle

2016-08-26 Drew Stanley

Können Sie ein reproduzierbares, minimales Beispiel auf jsfiddle oder [bootply] (http://bootply.com/new) erstellen? Es scheint auf der externen Seite gut zu funktionieren – ZimSystem

In welcher Browsergröße siehst du es aus? Es sieht gut aus auf etwas Großem, aber alles Medium (wie ein Macbook) oder kleiner, es beginnt dieses Problem zu haben. –

Verwendung affix offset.bottom. Es sollte auf die Höhe der Fußzeile mit einigen zusätzlichen Abstand für den Abstand zwischen der Seitenleiste und der Fußzeile festgelegt werden.

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

Quelle

2016-08-26 19:24:06 ZimSystem

Sieht aus wie das funktioniert. Vielen Dank! –

Fließende Seitenleiste in Fußzeile

Antwort

Verwandte Themen