CODEWITHSUNDEEP
csstwitter-bootstrap
JensB
JensB

Reputation: 6880

Scroll a bootstrap affixed div

I'm trying to create an affixed navigation bar in bootstrap that also allows me to scroll it's content when it is outside of the page.

Se here: http://www.bootply.com/T9x2m0FgmV

I've almost got it working except that I cant get the scrollbars to appear correct for the navigation bar "treemenu" when I scroll the page.

Ideally I would like the sidebar to just stick to the top, and look exactly like it does before you scroll aside from getting scrollbars. Right now it gets smushed up to the width of its content. Basically I want it to retain all the properties of the col-lg-4

enter image description here

I tried copying below CSS from bootstrap to mimick the col-lg-4 but that just make everything worse.

  width: 33.33333333%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;

Update 1: If I add something like: 

.affix{
  top: 0px;
  width: 19%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

It looks good untill I make the page small enough for the bootstrap to try to place things one after each other. When that happens the navbar and content gets placed on top of each other.

This does not look very appealing: enter image description here

Update 2: Just adding a % width like above does not work for all different browser sizes..

Upvotes: 0

Views: 1124

Answers (2)

JensB
JensB

Reputation: 6880

Ron van der Heijden let me on the path to a solution with:

You could just add $('#treemenu').width($('#treemenu').width());

Simply adding this does however not work when the page is resized as this does not resize the navigation bar after initial load. Also I cant just rerun this code after a resize since then the page might be scrolled and this would then not set the right width.

To deal with resizes I created a copy of the page base structure below all the other html.

  <!-- used to get real position -->
  <div class="row" id="shadowtreemenucontainer">
     <div class="col-sm-4"><div id="shadowtreemenu" class="well" style=></div></div>
      <div class="col-sm-8"></div>
   </div>

Then using jQuery I can resize the navigation bar on the fly to the size the col-sm-4 in the "hidden" shadowpage has.

function makeTreeNodeLookGood(){
  $('#shadowtreemenucontainer').show(1, function(){
    $('#treemenu').width($('#shadowtreemenu').width());
  });
  $('#shadowtreemenucontainer').hide(1);

  setHeightOfNonScrolledView();
}

function setHeightOfNonScrolledView(){
    $("#navTreeContainer").css({
      height: (($(window).height() -$("#navTreeContainer").offset().top + $(document).scrollTop() )) + 'px'
  }); 
}

$(document).ready(makeTreeNodeLookGood);
$(window).resize(makeTreeNodeLookGood);

$( window ).scroll(function() {
  setHeightOfNonScrolledView();
});

I also made it so the Navbar is fixed to the bottom of the screen untill it is pinned so that its height increases as you scroll untill it takes the entire height when pinned.

Working example: http://www.bootply.com/ooU5nm7rcY

Upvotes: 1

Ron van der Heijden
Ron van der Heijden

Reputation: 15080

You could just add $('#treemenu').width($('#treemenu').width());

Then you force the width to the element.

Upvotes: 1

Related Questions