粘性侧边栏从顶部激活120px

Question

我有一个代码，当#sidebar div到达页面顶部时会创建粘性边栏，但是我希望粘贴侧边栏在距离顶部120px时激活，而不是在它到达顶部时激活页面，因为它在我的标题下面然后到达顶部并向下滑动，任何帮助将非常感谢，提前感谢

＆＃13;

＆＃13;

var $sidebar = $("#sidebar"),
  $window = $(window),
  offset = $sidebar.offset(),
  topPadding = 0;

$window.scroll(function() {
  if ($window.scrollTop() > offset.top) {
    $sidebar.stop().animate({
      marginTop: $window.scrollTop() - offset.top + topPadding
    });
  } else {
    $sidebar.stop().animate({
      marginTop: 0
    });
  }
});

＆＃13;

.block {
  width: 100%;
  height: 1000px;
  background-color: #000;
}
.left {
  width: 60%;
  background-color: red;
  height: 600px;
  float: left;
}
.right {
  width: 40%;
  background-color: green;
  height: 600px;
  float: left;
}
.topblock {
  height: 200px;
  width: 100%;
  background-color: grey;
}
#sidebar {
  background-color: #efefef;
}
.header {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 50px;
  width: 100%;
  background-color: yellow;
  border: 1px solid: z-index: 100;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="header"></div>
<div class="block">
  <div class="left">
  </div>
  <div class="right">
    <div class="topblock"></div>
    <div id="sidebar">
      <p>SIDEBAR</p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

jsfiddle

Answer 1

您必须考虑标题的高度：

而不是：if ($window.scrollTop() > offset.top)

这样做： if ($window.scrollTop() > offset.top - headersize)

更新了你的小提琴： http://jsfiddle.net/8rdt0so9/3/

var $sidebar = $("#sidebar"),
  $window = $(window),
  offset = $sidebar.offset(),
  topPadding = 70;

var headersize = $('.header').height();

$window.scroll(function() {
  // show some live info
  $('.header').html(
    'window.scrollTop(): ' + $window.scrollTop() + "<br/>" +
    'offset.top: ' + offset.top + "<br/>" +
    'headersize: ' + headersize
  );
  if ($window.scrollTop() > offset.top - headersize) {
    $sidebar.stop().animate({
      marginTop: $window.scrollTop() - offset.top + topPadding
    });
  } else {
    $sidebar.stop().animate({
      marginTop: 0
    });
  }
});

.block {
  width: 100%;
  height: 1000px;
  background-color: #000;
}
.left {
  width: 60%;
  background-color: red;
  height: 600px;
  float: left;
}
.right {
  width: 40%;
  background-color: green;
  height: 600px;
  float: left;
}
.topblock {
  height: 200px;
  width: 100%;
  background-color: grey;
}
#sidebar {
  background-color: #efefef;
}
.header {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 50px;
  width: 100%;
  background-color: yellow;
  border: 1px solid: z-index: 100;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="header"></div>
<div class="block">
  <div class="left">
  </div>
  <div class="right">
    <div class="topblock"></div>
    <div id="sidebar">
      <p>SIDEBAR</p>
    </div>
  </div>
</div>

Answer 2

当足够的浏览器支持它时，您将能够使用新的sticky positioning：

#sidebar {
  position: sticky;
  top: 50px; /* header's height */
}

#sidebar {
  position: sticky;
  top: 50px; /* header's height */
}
.block {
  width: 100%;
  height: 1000px;
  background-color: #000;
}
.left {
  width: 60%;
  background-color: red;
  height: 600px;
  float: left;
}
.right {
  width: 40%;
  background-color: green;
  height: 600px;
  float: left;
}
.topblock {
  height: 200px;
  width: 100%;
  background-color: grey;
}
#sidebar {
  background-color: #efefef;
}
.header {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 50px;
  width: 100%;
  background-color: yellow;
  border: 1px solid: z-index: 100;
}

<div class="header"></div>
<div class="block">
  <div class="left">
  </div>
  <div class="right">
    <div class="topblock"></div>
    <div id="sidebar">
      <p>SIDEBAR</p>
    </div>
  </div>
</div>