Home > Web Front-end > HTML Tutorial > The webpage DIV can scroll with scrolling, but is fixed at the top of the page when scrolling down to the top_html/css_WEB-ITnose

The webpage DIV can scroll with scrolling, but is fixed at the top of the page when scrolling down to the top_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:42:10
Original
1465 people have browsed it

http://vacations.ctrip.com/grouptravel/p71671s2.html
Please tell me, the TAB menu item in this will always remain at the top when the page is scrolled down, and when the page is pulled up beyond it, it will Follow along.

How to achieve this?


Reply to the discussion (solution)

I saw a method as follows, but the DIV will shake, not as beautiful as the one above.

<html><head>  <title></title></head><body>  <div style="height:960px;background:#330000;">teatteat</div>  <div id="t" style="height:24px;background:#000000;color:#ffffff;text-align:center;">teatteat</div>  <div style="height:960px;background:#333333;">teatteat</div><script type="text/javascript">document.body.onscroll=function(){  if(document.body.scrollTop>=document.getElementById("t").offsetTop){    document.getElementById("t").style.position="absolute";    document.getElementById("t").style.top=document.body.scrollTop;  } else {    document.getElementById("t").style.position="static";    document.getElementById("t").style.top=document.body.scrollTop;  }} </script></body></html>
Copy after login

Link address: http://www.cnblogs.com/yjzhu/archive/2013/01/18/2866782.html
I don’t know what the above article is This is not the effect LZ wants.

Link address: http://www.cnblogs.com/yjzhu/archive/2013/01/18/2866782.html
I don’t know if the above article is the effect LZ wants.


Yes, this is exactly the effect, it’s a little shimmery, I’ll try it more
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template