2015-06-09 158 views
0

作为昨天关于我的question的后续关于HTML/CSSS列滚动。HTML/CSS/jquery滚动问题

这是工作,但我有一个问题,当右列比屏幕高度短,只要我开始滚动该列移动到页面的底部。

This FIDDLE显示了我的意思。

jQuery的使用是:

var columnHeight = $('.right').outerHeight(true); 

var windowHeight = $(window).height(); 
$(window).scroll(function() { 

    if ($(this).scrollTop() + windowHeight >= columnHeight) { 
     $('.right').css({ 
      position: 'fixed', 
      top: -(columnHeight - windowHeight) 
     }); 
    } else { 
     $('.right').css({ 
      position: 'static', 
      top: 'auto' 
     }); 
    } 
}); 

我试图存档是,如果右列是不是只要在屏幕上,那么它应该留在上面。

如果它比屏幕长,那么它应该滚动,但在到达底部时停止。

如果需要,左栏需要能够继续滚动。

希望这是有道理的! 谢谢

**** UPDATE **** 将右列设置为FIXED将停止滚动到列表底部,如果它长于屏幕。

+0

如果你设置'位置:fixed'但没有设置'top'值'ul'将留在其原来放置:https://jsfiddle.net/ 3a0575fu/1 /。那是你要的吗? –

+0

注意很.. https://jsfiddle.net/3a0575fu/14/显示当两个列表都相当日志会发生什么..你不能长期向下滚动在右边列表 – Tom

+0

任何一个任何其他的想法呢? – Tom

回答

0

你的问题解决了。只需添加位置:固定在你的CSS

.connected.right { 
       min-height:100px; 
       height: 100%; 
       float: left; 
       position:fixed; 
      } 
0

试试这个更新JSFIDDLE。 我希望这对你有用。只是评论,如果它不。

var columnHeight = $('.right').outerHeight(true); 
 

 
var windowHeight = $(window).height(); 
 
$(window).scroll(function() { 
 

 
    if ($(this).scrollTop() + windowHeight >= columnHeight) { 
 
    $('.right').css({ 
 
     position: 'fixed', 
 
     top: -(columnHeight - windowHeight) 
 
    }); 
 
    } else { 
 
    $('.right').css({ 
 
     position: 'fixed', 
 
     top: 'auto' 
 
    }); 
 
    } 
 
});
.connected { 
 
    min-height: 100px; 
 
    float: left; 
 
    width: 200px; 
 
} 
 
.connected.right { 
 
    min-height: 100px; 
 
    height: 100%; 
 
    float: left; 
 
    position: absolute; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table border="0" width="65%"> 
 
    <tr> 
 
    <td valign="top"> 
 
     <ul class="connected" id="new"> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     </ul> 
 
    </td> 
 
    <td valign="top"> 
 
     <ul class="connected right" id="old"> 
 
     <li>AAA</li> 
 
     <li>AAA</li> 
 
     <li>AAA</li> 
 
     <li>AAA</li> 
 
     <li>AAA</li> 
 
     <li>AAA</li> 
 
     <li>AAA</li> 
 
     <li>AAA</li> 
 
     <li>AAA</li> 
 
     <li>AAA</li> 
 
     <li>AAA</li> 
 
     <li>AAA</li> 
 
     <li>AAA</li> 
 

 
     </ul> 
 
    </td> 
 
    </tr>

+0

请描述您对问题代码所做的更改,并将修改内容包含在答案中。 –

+0

请参阅我原来的问题的更新。 – Tom

+0

@Rory McCrossan我只更新了JSFiddle,因为之前的小提琴工作得很好,但是当滚动到顶部时,它用来改变位置,但是这很有效。 –