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

      });

});

这似乎输出了预期的效果。我将底部边距添加到超大屏幕以说明导航栏的状态变化。 (导航栏高度 = 74 像素)。

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

编辑已解决:

出现白线是因为 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 或等效工具来准确查看在这两种情况下控制定位的因素，然后调整一个或另一个以使它们匹配。