Question

早安，

我在滚动时在屏幕后面的页面右侧网站上有一个侧边栏的信息页面，但是当他到达div时，它仍然跟在页面之后。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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的底部，并在＆＃34中设置动画;否则如果＆＃34;。

你可以使用

获得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的侧栏

2 个答案: