只有垂直粘性的HTML div

时间:2011-01-06 04:05:34

标签: html css


是否有可能使div垂直粘,但不能水平粘? 干杯 阿里

4 个答案:

答案 0 :(得分:5)

在纯CSS中执行此操作的唯一机会涉及position: fixed属性,但这需要基于窗口的常量偏移。

如果您熟悉JavasSript库,可以通过使用一些jQuery来完成它:

$(window).bind('scroll resize', function() {
    $('#the-sticky-div').css('top', $(this).scrollTop());
});

这也需要一些CSS才能使其正常工作:

#the-sticky-div {
    position: relative;
}

DEMO: http://jsfiddle.net/marcuswhybrow/SYqXJ/23/

答案 1 :(得分:3)

我无法理解矛盾的陈述,所以我会回答第一个;)

在这种情况下,

position: fixed是你的朋友,但我不确定它是如何做到的,也不能同时垂直粘贴......

答案 2 :(得分:2)

我认为如果你将元素置于绝对位置然后只将其顶部设置为零,那么它应该只会粘在顶部。

答案 3 :(得分:0)

<div style="position:fixed; background:yellow;">
	<h1>S<BR>T<BR>A<BR>C<BR>K<BR><BR>O<BR>V<BR>E<BR>R<BR>F<BR>L<BR>O<BR>W</h1>
</div>

<div style="white-space: nowrap;">
aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt 
</div>