滚动后div位置应保持固定

时间:2017-01-20 17:32:18

标签: javascript jquery html css

我的确切问题与使用插件等skrollr js有关。

我有图像及其功能的特征部分。特征在列表项目div中,图像在另一个div中。这两个部分是col-sm-6并排。

我正在尝试做的只是在将图像分割滚动到视口中心后将图像分割的位置固定在中心位置。如果有人向下滚动查看图像,它应该在其中心后保持固定触摸视口中心。当图像保持固定时,列表项应该滚动。

在最后一个列表项离开视口后,图像位置将再次变为静态并滚动内容。所以任何建议......

这是代码



verify




1 个答案:

答案 0 :(得分:0)

$(document).ready(function(){
    $(window).scroll(function(){
if(($(window).scrollTop())>($('#content').offset().top+$('#content').innerHeight()))  {
    $('#divv').css({'position':'fixed','top':$(window).outerHeight()/2});
     
}  
     else{
    
  $('#divv').css({'position':'relative'});  
}

    
})
})
 #content-initial{
        margin-top:1500px;
        
    }
    #divv{
        width:100px;
            height:100px;
        background:green;
    }  
    #content{position:relative;}
    #somemorecontent{
        height:1000px;
        
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content-initial"></div>
    <div id="content">
    <ul>
    <li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
        </div>
   
    <div id="divv"></div>
    <div id="somemorecontent"></div>