I would like to ask you a question about the style of div floating_html/css

Hello everyone, I want to achieve such an effect, that is, when the scroll bar is pulled down, when a div is pulled, and there is no content under this div, then if I continue to pull down, the div will move down with the scroll bar. Synchronous movement, can anyone tell me how to achieve it? Some implementation methods make the div jump unsightly. I saw a website http://www.kl688.com/ on the Internet. The advertisement at the bottom on the right has this effect. Please Thank you for your guidance

Reply to the discussion (solution)

Just add a fixed style when the page scrolls beyond the inherent position

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

Copy after login

Just add a fixed style when the page scrolls beyond the inherent position
HTML code

I’ve tested it on all browsers
You don’t have to download jquery?

Just add a fixed style when the page scrolls beyond the inherent position
HTML code

< ;/script>

/* IE6 position fixed Top
Highlight.

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

Copy after login

I have tested it on all kinds of browsers
You haven’t downloaded jquery, right?
Haha, I didn’t notice that you used jquery. I have tested it. , no problem, but it still has no effect when placed in my website. It should be that some other styles in the web page have an impact, so I don’t need this effect anymore. Anyway, thank you!

JScript code

"http://www.w3. org/TR/xhtml1/DTD/xhtml1-strict.dtd">

I would like to ask you a question about the style of div floating_html/css_WEB-ITnose

Reply to the discussion (solution)