div 从绝对定位更改为固定定位 - 发生不必要的移位

Question

感谢一些反馈，我做了一些更改。

新 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>

我还将容器宽度更改为 100% 并删除了左侧填充，以便侧边栏自然地位于页面的左上角，直接位于导航栏下方。

新的 SCSS：

侧边栏的所有规则：

.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%;
      }
    }
  }
}

容器更改

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

要使用 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;
}

新的 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');
          }

      });

});

这似乎输出了所需的效果。我将底部边距添加到 jumbotron 以说明导航栏的状态变化。 （导航栏高度 = 74px）。

我现在唯一的问题是侧边栏的顶部在它和导航底部之间显示一条细白线/空间，直到它们的状态变为固定，此时白线消失。我不确定是什么原因造成的...可能是浏览器错误？ （我正在使用铬）

编辑已解决：

出现白线是因为 z-index 在导航栏固定后被应用到导航栏。

Answer 1

我建议不要直接在 jquery 中设置 css 属性，而是在 css 文件中设置所有这些属性，并使用 jquery 仅通过 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');
}

这将有助于调试定位问题。禁用 jquery，然后在侧边栏上查看带有和不带有 class='sticky' 的页面。然后，您可以使用 firebug 或等效工具来准确查看在这两种情况下控制定位的原因，然后调整其中一种以使它们匹配。