Maison >interface Web >tutoriel HTML >请教各位一个div浮动的样式问题_html/css_WEB-ITnose
请教各位一个div浮动的样式问题_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 12:10:22990parcourir
大家好，我想实现这么一个效果，就是滚动条往下拉的时候当拉到一个div，而且此div下面已经没有内容了，那么如果我继续往下拉这个div会随着滚动条往下同步移动，有没有人告诉我怎么实现啊，有些实现方式div跳动的不好看，我在网上看到一个网站http://www.kl688.com/这里的右边最下面那个广告就是这个效果，求指导，谢谢啊
回复讨论(解决方案)
页面滚动超过固有位置时加一个fixed的样式就可以了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>滚动超过时固定位置</title> <script type="text/javascript" src="js/jquery-1.6.4.min.js" ></script> <style type="text/css" > .fixed-top /* position fixed Top */{position:fixed;bottom:auto;top:0; } * html .fixed-top /* IE6 position fixed Top */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));} </style></head><body><div style="height:500px;border:1px solid green;">some text before</div> <div id="fixpass" style="border:1px solid red; background-color:gray;width:100%;">这是一些文字，滚动超过时将固定</div><div style="height:1000px;border:1px solid blue;position:relative;">some text after<div style="position:absolute;bottom:0;">some end text</div></div></body> <script type="text/javascript"> var $window = $(window), $stickyEl = $('#fixpass'); var elTop = $stickyEl.offset().top; $window.scroll(function() { var windowTop = $window.scrollTop(); $stickyEl.toggleClass('fixed-top', windowTop > elTop); }); </script></html> 页面滚动超过固有位置时加一个fixed的样式就可以了
HTML code
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
我各种游览器都测试过的
你不会没有下jquery吧
页面滚动超过固有位置时加一个fixed的样式就可以了
HTML code
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script></script>
/* IE6 position fixed Top
亮点呀。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">*{margin:0;padding:0;}body{background:#242424;color:#ccc;font-family:Verdana, Arial, Helvetica, sans-serif;line-height:150%;}#fixed{position:fixed;top:5em;right:0;} <!-- 针对IE7、Opera、Firefox一行搞定 --></style><!-- IE6中利用容器对溢出内容的处理方式来实现的 --><!-- fixed元素的绝对位置是相对于HTML元素来说，滚动条是body元素的，这是设置right:17px的原因 --><!--[if IE 6]><style type="text/css">html{overflow:hidden;}body{height:100%;overflow:auto;}#fixed{position:absolute;right:17px;}</style><![endif]--><!--[if lt IE 6]><style type="text/css">#fixed{position:absolute;top:expression(eval(document.body.scrollTop + 50));}</style><![endif]--></head><body><div id="wrapper"><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><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><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><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li></ul></div><div id="fixed"><h2>{position:fixed}</h2></div></body></html> 我各种游览器都测试过的
你不会没有下jquery吧
晕，没注意你用到了jquery，我测试过了，没问题，不过放在我网站里面还是没效果，应该是网页中其他的一些样式有影响，还是不用这个效果了。总之谢谢你啊！
JScript code
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
这个应该也可以，我没试，感谢啊！
有空欢迎看看我的网站- 好望角，感谢各位！