javascript - Fixed sidebar in bootstrap that starts at a certain position - Stack Overflow

admin管理员组

文章数量:1410730

Just in case someone finds this question searching for an answer, thanks to timemachine3030 I now have a solution for this problem.

The sidebar looks like this now:

<div class="container-fluid">
  <div class="row-fluid"> 
    <div class="span4"> 
          <ul class="nav nav-list" data-spy="affix" data-offset-top="750">
        <li><a href="#one"><i class="icon-chevron-right"></i> One</a></li>
        <li><a href="#two"><i class="icon-chevron-right"></i> Two</a></li>
        <li><a href="#three"><i class="icon-chevron-right"></i> Three</a></li>
        <li><a href="#four"><i class="icon-chevron-right"></i> Four</a></li>
        <li><a href="#five"><i class="icon-chevron-right"></i> Five</a></li>
        <li><a href="#six"><i class="icon-chevron-right"></i> Six</a></li>
        <li><a href="#seven"><i class="icon-chevron-right"></i> Seven</a></li>
    </ul>

    </div><!--/span-->

We also added top: 60px; to the .affix in the bootstrap.css file With this plus what I already had (shown below) I have successfully re-created the "sticky" sidebar wich Bootstrap uses: .html#affix

timemachin3030: THANK YOU SO MUCH FOR THIS SOLUTION! I HOPE YOU DON'T MIND LINKING TO YOUR PROFILE!

---

Ok I am using Bootstrap,

Perfect example of what I am trying to achieve: .html

I have a fixed sidebar navigation menu that is fixed meaning it scrolls with the page.

Right now it starts at the top of the page "on-top of the hero unit" as you scroll down the page it follows the page.

I want it to start at the beginning of the real content, Where the navigation actually starts.

Here is a portion of the html page using bootstrap.

<div class="hero-unit">
  <div class="container-fluid">
    <div class="row-fluid"> 
      <div class="span8"> 
        <div id="myCarousel" class="carousel slide"> 
          <!--Carousel items --> 
          <div class="carousel-inner"> 
            <div class="active item"><img src="img/carousel/photo1.jpg"></div> 
            <div class="item"><img src="img/carousel/photo2.jpg"></div> 
            <div class="item"><img src="img/carousel/photo3.jpg"></div>
          </div>
        </div>
      </div> 
      <div class="span4">
        <h2>The Green Panda</h2>
        <p>Professional Web Design</p>
        <a href="#scrollhere" class="btn btn-primary btn-large">Learn More</a>
      </div>
    </div> 
  </div>
</div>
<div>
  <h2 align="center" id="scrollhere">Professional Web Design</h2>
  <h3 align="center">Powerful. Professional. Affordable</h3>
  <hr>
</div> 
<div class="container-fluid">
  <div class="row-fluid"> 
    <div class="span4"> 
      <div class="well sidebar-nav-fixed" data-spy="affix" data-offset-top="300">
        <ul class="nav nav-list">

          <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="nav-header">Sidebar</li>

          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>

          <li class="nav-header">Sidebar</li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->
    </div><!--/span-->
    <div class="span8"> 

      <h3>What We Do</h3> 
      <p>Here at The Green Panda, we provide custom website development as our main strong hold. Web design was the primary reason for opening The Green Panda!</p> 

      <p>Throughout the last year we have worked very hard to provide our clients with more solutions. All of our hard work has paid off, we now provide an on line site builder and custom printed promotional products. This is on-top of our custom web design we have provided from day one.</p>

      <h3>Our Solutions</h3> 
      <p>Once a year we distribute a survey to our clients, the bars below dictate what our clients have ranked us within the last year on the solutions we offer. We believe it's important for you as a future client to have a firm understanding of what we are capable of.Click on each bar to find out more information.</p>
      <strong>Web Design</strong> 100%
      <div class="progress progress-success progress-striped active">
        <div class="bar" style="width: 100%;" id="webdesign-bar" rel="popover" data-content="We are very proud to present a perfect rating in web design for the year 2012!" data-original-title="Our Main Focus" data-placement="top"></div>
      </div>

To get the sidebar to be fixed I added this extra css:

.sidebar-nav-fixed {
  position: fixed;
  top: 60px;
  width:21.97%;
}

@media (max-width: 767px) {
  .sidebar-nav-fixed{
    width:auto;
  }
}

@media (max-width: 979px) {
  .sidebar-nav-fixed {
    position: static;
    width: auto;
  }
}

Just in case someone finds this question searching for an answer, thanks to timemachine3030 I now have a solution for this problem.

The sidebar looks like this now:

<div class="container-fluid">
  <div class="row-fluid"> 
    <div class="span4"> 
          <ul class="nav nav-list" data-spy="affix" data-offset-top="750">
        <li><a href="#one"><i class="icon-chevron-right"></i> One</a></li>
        <li><a href="#two"><i class="icon-chevron-right"></i> Two</a></li>
        <li><a href="#three"><i class="icon-chevron-right"></i> Three</a></li>
        <li><a href="#four"><i class="icon-chevron-right"></i> Four</a></li>
        <li><a href="#five"><i class="icon-chevron-right"></i> Five</a></li>
        <li><a href="#six"><i class="icon-chevron-right"></i> Six</a></li>
        <li><a href="#seven"><i class="icon-chevron-right"></i> Seven</a></li>
    </ul>

    </div><!--/span-->

We also added top: 60px; to the .affix in the bootstrap.css file With this plus what I already had (shown below) I have successfully re-created the "sticky" sidebar wich Bootstrap uses: http://twitter.github.io/bootstrap/javascript.html#affix

timemachin3030: THANK YOU SO MUCH FOR THIS SOLUTION! I HOPE YOU DON'T MIND LINKING TO YOUR PROFILE!

---

Ok I am using Bootstrap,

Perfect example of what I am trying to achieve: http://twitter.github.io/bootstrap/ponents.html

I have a fixed sidebar navigation menu that is fixed meaning it scrolls with the page.

Right now it starts at the top of the page "on-top of the hero unit" as you scroll down the page it follows the page.

I want it to start at the beginning of the real content, Where the navigation actually starts.

Here is a portion of the html page using bootstrap.

<div class="hero-unit">
  <div class="container-fluid">
    <div class="row-fluid"> 
      <div class="span8"> 
        <div id="myCarousel" class="carousel slide"> 
          <!--Carousel items --> 
          <div class="carousel-inner"> 
            <div class="active item"><img src="img/carousel/photo1.jpg"></div> 
            <div class="item"><img src="img/carousel/photo2.jpg"></div> 
            <div class="item"><img src="img/carousel/photo3.jpg"></div>
          </div>
        </div>
      </div> 
      <div class="span4">
        <h2>The Green Panda</h2>
        <p>Professional Web Design</p>
        <a href="#scrollhere" class="btn btn-primary btn-large">Learn More</a>
      </div>
    </div> 
  </div>
</div>
<div>
  <h2 align="center" id="scrollhere">Professional Web Design</h2>
  <h3 align="center">Powerful. Professional. Affordable</h3>
  <hr>
</div> 
<div class="container-fluid">
  <div class="row-fluid"> 
    <div class="span4"> 
      <div class="well sidebar-nav-fixed" data-spy="affix" data-offset-top="300">
        <ul class="nav nav-list">

          <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="nav-header">Sidebar</li>

          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>

          <li class="nav-header">Sidebar</li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->
    </div><!--/span-->
    <div class="span8"> 

      <h3>What We Do</h3> 
      <p>Here at The Green Panda, we provide custom website development as our main strong hold. Web design was the primary reason for opening The Green Panda!</p> 

      <p>Throughout the last year we have worked very hard to provide our clients with more solutions. All of our hard work has paid off, we now provide an on line site builder and custom printed promotional products. This is on-top of our custom web design we have provided from day one.</p>

      <h3>Our Solutions</h3> 
      <p>Once a year we distribute a survey to our clients, the bars below dictate what our clients have ranked us within the last year on the solutions we offer. We believe it's important for you as a future client to have a firm understanding of what we are capable of.Click on each bar to find out more information.</p>
      <strong>Web Design</strong> 100%
      <div class="progress progress-success progress-striped active">
        <div class="bar" style="width: 100%;" id="webdesign-bar" rel="popover" data-content="We are very proud to present a perfect rating in web design for the year 2012!" data-original-title="Our Main Focus" data-placement="top"></div>
      </div>

To get the sidebar to be fixed I added this extra css:

.sidebar-nav-fixed {
  position: fixed;
  top: 60px;
  width:21.97%;
}

@media (max-width: 767px) {
  .sidebar-nav-fixed{
    width:auto;
  }
}

@media (max-width: 979px) {
  .sidebar-nav-fixed {
    position: static;
    width: auto;
  }
}

• javascript
• css
• twitter-bootstrap

Share Follow edited May 23, 2017 at 10:25 CommunityBot 111 silver badge asked May 14, 2013 at 4:30 user2371301user2371301 3,48444 gold badges2020 silver badges2626 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Lucky for you that is built into Bootstrap. It is a feature called 'Affix' see: http://twitter.github.io/bootstrap/javascript.html#affix for how to use it!

本文标签： javascriptFixed sidebar in bootstrap that starts at a certain positionStack Overflow