Scroll fixed div content with browser scrollbar
Question
I have 2 div with fix position on my page, I want to scroll the second div up and down with browser scrollbar not the div scroll, Does anyone know how to do this? I hope it's not too confusing.
#firstDiv { position:fixed;width:70%;height:20%;background-color:red; } #secondDiv { top:20%;position:fixed;width:70%;background-color:blue;overflow-y:scroll;bottom:0px }
<html> <head> <title>somthing</title> </head> <body> <div> <div id="firstDiv"> </div> <div id="secondDiv"> <pre> some Text some Text some Text some Text some Text some Textsome Textsome Textsome Textsome Textsome Textsome some Textsome Textsome Textsome Textsome Textsome Textsome </pre> </div> </div> </body> </html>
bar
1 answers
solution1
0 ACCPTED 2015-08-03 11:05:07
The fixed property makes both divs scroll up and down with the user already. With your current setup you can't see that because there is no scrolling up or down on your page.
What you probably want to do is make only the first div fixed and leave the other at static (the standard value). If the second div is high enough, the browser will add a scrollbar, allowing you to scroll up/down over the second div while the first div remains in place.
Take a look at this snippet (be sure to click "Full page" in the top-right corner):
body { margin:0; } #first { position:fixed; top:0; width:100%; height:100px; background-color:red; } #second { margin-top:100px; width:100%; height:1500px; background-color:blue; }
<body> <div id="first"> First div </div> <div id="second"> Some text more text even more text.<br /> A new line here. More text.<br /> Text text text text text text.<br /> Text text text text text text.<br /> Text text text text text text.<br /> Text text text text text text.<br /> Text text text text text text.<br /> Text text text text text text.<br /> Et cetera.<br /> </div> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.