1. 홈
  2. 질의 응답
  3. 바닥 글로 실행중인 부동 사이드 바

바닥 글로 실행중인 부동 사이드 바

2016-08-26 5 views
1

플로팅 사이드 바가있는 간단한 한 페이지짜리 사이트가 부트 스트랩에 내장되어 있습니다. 특정 화면 크기를 제외하고는 모든 것이 올바르게 작동합니다. 사이드 바는 페이지 아래쪽 하단과 바닥 글에 표시됩니다. 페이지 하단의 특정 부분에 도달하면 어떻게 멈추게합니까? 오프셋이 있니?바닥 글로 실행중인 부동 사이드 바

$(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 사이트 :

여기에 내 JS 파일입니다.

출처

2016-08-26 Drew Stanley

+1

당신은 jsfiddle 또는 [bootply] (http://bootply.com/new)에 재현, 최소한의 예를 만들 수 있습니까? 그것은 외부 사이트에서 잘 작동하는 것 같습니다 – ZimSystem

+0

당신은 그것에 어떤 브라우저 크기를보고 계십니까? 그것은 큰 아무것도하지만 맥북 같은 작은 매체() 매체에 아무것도 좋아 보이는데,이 문제가 시작됩니다. –

답변

1

어 픽스 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

+0

이게 잘된 것 같습니다. 감사! –

 관련 문제

  • 관련 문제 없음^_^