最后停止侧边栏 div

Question

早上好，

我有一个信息页面，页面右侧有一个侧边栏，滚动时跟随屏幕，但当他到达 div 的位置时，它仍然跟随页面。

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

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

#sidebar {
  width: 190px;
}
#sidebar li {
  border-left: 1px solid orange;
  border-bottom: 1px solid orange;
  border-top: 1px solid orange;
  list-style-type: none;
  text-align: left;
  padding-left: 8px;
  border-collapse: collapse;
}
#sidebar li:hover {
  font-size: 17px;
  font-weight: bold;
  background-color: #FF8D00;
  color: white;
}
#sidebar lu {
  list-style-type: none;
  text-decoration: none;
}
#sidebar li:hover a {
  color: white;
}
body {
  height: 3000px;
}

<div id="sidebar" class="span3 over_inhoud rechts Padding-top-orange">
  <ul>
    <li><a href="#Agenda">Agenda</a>
    </li>
    <li><a href="#urenregistratie">Urenregistratie</a>
    </li>
    <li><a href="#rapportage">Rapportage</a>
    </li>
    <li><a href="#Factureren">Factureren</a>
    </li>
    <li><a href="#Koppelingen">Koppelingen</a>
    </li>
    <li><a href="#planning">Planning</a>
    </li>
    <li><a href="#Boekhouden">Boekhouden</a>
    </li>
    <li><a href="#Mobile">Mobile App</a>
    </li>
    <li><a href="#Ontwikkeling">Ontwikkeling</a>
    </li>
  </ul>
</div>

http://www.clockwise.mar-bakker.nl/info.html

Answer 1

您的站点上有 Twitter Bootstrap，那么为什么不使用此框架中的 Affix.js 插件：http://getbootstrap.com/javascript/#affix ??

简单地说：

$('#sidebar ul').affix({...})

应该完成这项工作。

并且在选项中您当然可以设置 bottom 参数以在容器到达特定位置时停止粘贴。

Answer 2

您可以使用 div 的高度来判断是否到达 div 的底部，并在 "else if" 中设置动画。

您可以使用

获取 div 的高度

div_height = $("#InformatieDiv").height()

所以会有如下三个分支：

if ($window.scrollTop() > offset.top){
  #CODE TO STOP SCROLLING UP
}else if($window.scrollTop() < (offset.top + div_height)){
  #CODE TO STOP SCROLLING DOWN
}else{
}

希望对您有所帮助。

最后停止侧边栏 div

Stop sidebar on end div

html

javascript

css

jquery

sidebar