Div changing from aboslute to fixed positioning - unwanted shifting occuring

Question

Thanks to some feedback I've made some changes.

NEW HMTL:

<div class="row">
   <div class="hidden-xs hidden-sm col-md-3 sidebar-div">
      <div class="sidebar">
         <div><input type="text" name="" value="">
            <button type="submit" name="button">submit</button>
         </div>
         <div>
            <h4>Recent Posts</h4>
            <ul>
               <li>
                  <a href="">Bleep bloop</a>
               </li>
               <li>
                  <a href="">Blah blah</a>
               </li>
               <li>
                  <a href="">Site intro</a>
               </li>
            </ul>
         </div>
         <div>
            <h4>Meta</h4>
            <ul>
               <li><a href="">Site Admin</a></li>
               <li><a href="">Log out</a></li>
               <li><a href="">RSS</a></li>
               <li><a href="">RSS</a></li>
               <li><a href="">WordPress.org</a></li>
            </ul>
         </div>
      </div>
   </div>
   <div class="col-xs-12 col-md-9">
      <div class="content-div">
         <h3 class="page-heading">
            services
         </h3>
         <div class="row services-content">
            <p>Managing content will be a breeze</p>
            <p>Stand out above the rest</p>
            <p>Clean, compact &amp; elegant code</p>
         </div>
      </div>
   </div>
</div>

I've also changes my container width to 100% and have removed left padding so that the sidebar will naturally sit at the top left position of the page, directly under the navbar.

NEW SCSS:

all rules for the sidebar:

.sidebar-div{
  padding-left: 0;
}
.container{
  .sidebar{
    border-bottom: 4px dashed darken($kanye, 20%);
    border-right: 4px dashed darken($kanye, 20%);
    background: darken($kanye, 30%);
    @include global-box-shadow;
    width: 250px;
    color: $white;
    padding: 2rem;
    div{
      input{
        width: 90%;
      }
    }
  }
}

container changes

@media (min-width: 992px){
    .post-type-archive-services{
      .container{
        width: 100%;
        padding-left: 0;
      }
    }
  }

global classes to be added with jQuery

.sticky-nav{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.sticky-sidebar{
  position: fixed;
  top: 0;
  left: 0;
  margin-top: 74px;
}

.jumbotron-adjust{
  margin-bottom: 74px;
}

.navbar{
  z-index: 5000;
}

NEW JQUERY:

$(document).ready(function() {

    var target_pos = $('.navbar').offset().top;

    $(window).resize(function(){
      target_pos = $('.navbar').offset().top;
    });


      $(window).scroll(function() {

        console.log(target_pos);

        var scroll_pos = $(this).scrollTop();

          if( scroll_pos >= target_pos){
            $('.navbar').addClass('sticky-nav');
            $('.sidebar').addClass('sticky-sidebar');
            $('.jumbotron').addClass('jumbotron-adjust');
          }else{
            $('.navbar').removeClass('sticky-nav');
            $('.sidebar').removeClass('sticky-sidebar');
            $('.jumbotron').removeClass('jumbotron-adjust');
          }

      });

});

This appears to output the desired effect. I added the bottom margin to the jumbotron to account for the state change of the navbar. (navbar height = 74px).

My only problem now is that the top of the sidebar shows a thin white line/space between it and the bottom of the nav, until their states change to fixed, at which point the white line disappears. I'm not sure whats causing this... Could be a browser bug? (I'm using chrome)

EDIT RESOVLED:

The white line was present because of the z-index being applied to the navbar after it becomes fixed.

Answer 1

I would recommend not setting css properties directly in your jquery, but instead setting all these in a css file and using jquery only to toggle between styles by means of addClass / removeClass:

.sidebar-div {
  position: static;
}

.sidebar-div.sticky {
  position: fixed;
  ...
}

/* jquery */
if( $(this).scrollTop() <= nav_pos) {
  $('.sidebar-div').removeClass('sticky');
} else {
  $('.sidebar-div').addClass('sticky');
}

This will facilitate debugging the positioning issues. Disable the jquery, and then view your page with and without class='sticky' on your sidebar. You can then use firebug or equivalent to see exactly what is controlling the positioning in both cases, and then adjust one or the other to make them match.