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

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

      });

});

这似乎输出了所需的效果。我向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 =＆＃39; sticky＆＃39;来查看您的页面。在侧边栏上。然后，您可以使用firebug或等效物来确切地查看在两种情况下控制定位的确切内容，然后调整其中一个以使它们匹配。

Div从aboslute变为固定定位 - 发生不必要的转移

1 个答案: