请教各位一个div浮动的样式问题_html/css_WEB-ITnose-html教程-PHP中文网

请教各位一个div浮动的样式问题_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 12:10:22

原创

1105人浏览过

大家好，我想实现这么一个效果，就是滚动条往下拉的时候当拉到一个div，而且此div下面已经没有内容了，那么如果我继续往下拉这个div会随着滚动条往下同步移动，有没有人告诉我怎么实现啊，有些实现方式div跳动的不好看，我在网上看到一个网站http://www.kl688.com/这里的右边最下面那个广告就是这个效果，求指导，谢谢啊

PatentPal专利申请写作

AI软件来为专利申请自动生成内容

查看详情

回复讨论(解决方案)

页面滚动超过固有位置时加一个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">

<!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">

这个应该也可以，我没试，感谢啊！

有空欢迎看看我的网站- 好望角，感谢各位！