Sticky-kit元素跳跃

时间:2016-12-12 21:25:04

标签: javascript jquery sticky

遇到Sticky-kit的问题导致我的一个元素在到达其父div的底部时跳转。

这是我的代码:

collection = MongoClient().db.collection
for hostname, services in dataset[0].items():
    collection.insert_one({'hostname': hostname,
                           'services': services})

CSS

<div class="wrapper">

<div id="bg">

  <div id="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididdunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exedrcitation ullamco laborisd nisi ut aliquip ex ea commodo consequat. Duisds aute irure dddsdsdsolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </div>

  <div id="pic1">
    Pic1
  </div>

  <div id="pic2">
    Pic2
  </div>

  <div id="pic3">
    Pic3
  </div>

</div>

</div>

JS

.wrapper {
  height:2000px
}

#text {
  float:right;
  position: relative;
  width: 300px;
  background-color:orange;
  height:400px;

}

#bg {
    background-color: #c0c0c0;
    width:800px;
    height:650px;
  padding:0;
  margin:0;
}


#pic1 {

 height:150px;
  width: 300px;
  position:relative;
  background-color:red;

}

#pic2 {

 height:150px;
  width: 300px;
  position:relative;
  background-color:blue;

}

#pic3 {

 height:150px;
  width: 300px;
  position:relative;
  background-color:green;

}

http://codepen.io/SeanLindsay1/pen/dOqgER

由于div正好浮动似乎正在发生,但我不完全确定。

1 个答案:

答案 0 :(得分:0)

删除&#34;职位:亲属&#34;它应该按预期运行:

#text {
  float:right;
  width: 300px;
  background-color:orange;
  height:400px;
}