search

Home >Web Front-end >HTML Tutorial >I would like to ask you a question about the style of div floating_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 12:10:22988browse

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>

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

88cba9fe9170e5a53fb8e28da28c17d5
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

88cba9fe9170e5a53fb8e28da28c17d5
e0b93fe1d7ed30dabd8cae19c162a24b< ;/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>

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


3055753ad5b8ce757da7c8a70397def5
68ccb177a5de0ef9542dde7d35bae727
93f0f5c25f18dab9d176bd4f6de5d30e