javascript - Div with scroll over another div with scroll -
i have 2 containers (c1 , c2) long list inside of it, 1 on other, both scroll.
i need able keep c1 scroll position when c2 opens , c2 has open in top of container.
when close c2, need go same position @ c1.
the problem c1 long , remains visible under c2 , not able go c1 c2 , come c1 same scroll position.
i have build simple example:
html:
<div id="container"> <div id="btn1">show on div</div> <div id="btn2">hide on div</div> <div id="div-under"> <ul> <li>div under</li> <li>div under</li> <li>div under</li> </ul></div> <div id="div-over"> <ul> <li>div over</li> <li>div over</li> </ul> </div> </div> script:
$("#btn1").on("click", function () { $("#div-over").fadein(); $("#btn2").fadein(); $("#btn1").fadeout(); }); $("#btn2").on("click", function () { $("#div-over").fadeout(); $("#btn1").fadein(); $("#btn2").fadeout(); }); css:
#container { width: 100%; height: 100%; } #btn1 { position: fixed; top: 0; left: 200px; z-index: 15; background-color: yellow; } #btn2 { display: none; position: fixed; top: 0; left: 300px; z-index: 25; background-color: yellow; } #div-under { width: 100%; height: 100%; position: absolute; top: 0; z-index: 10; background-color: green; } #div-over { display: none; width: 100%; height: 100%; position: absolute; top: 0; z-index: 20; background-color: red; }
can check once adding 1 more css property both of container divs
overflow: auto; the css should follows
#div-under { width: 100%; height: 100%; position: absolute; top: 0; z-index: 10; background-color: green; overflow: auto; } #div-over { display: none; width: 100%; height: 100%; position: absolute; top: 0; z-index: 20; background-color: red; overflow: auto; } $("#btn1").on("click", function () { $("#div-over").fadein(); $("#btn2").fadein(); $("#btn1").fadeout(); $("#div-under").scrolltop(0); }); $("#btn2").on("click", function () { $("#div-over").fadeout(); $("#btn1").fadein(); $("#btn2").fadeout(); $("#div-over").scrolltop(0); });#container { width: 100%; height: 100%; } #btn1 { position: fixed; top: 0; left: 200px; z-index: 15; background-color: yellow; } #btn2 { display: none; position: fixed; top: 0; left: 300px; z-index: 25; background-color: yellow; } #div-under { width: 100%; height: 100%; position: absolute; top: 0; z-index: 10; background-color: green; overflow: auto; } #div-over { display: none; width: 100%; height: 100%; position: absolute; top: 0; z-index: 20; background-color: red; overflow: auto; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <div id="container"> <div id="btn1">show on div</div> <div id="btn2">hide on div</div> <div id="div-under"> <ul> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> <li>div under</li> </ul></div> <div id="div-over"> <ul> <li>div over</li> <li>div over</li> <li>div over</li> <li>div over</li> <li>div over</li> <li>div over</li> <li>div over</li> <li>div over</li> <li>div over</li> <li>div over</li> <li>div over</li> <li>div over</li> <li>div over</li> <li>div over</li> <li>div over</li> <li>div over</li> <li>div over</li> <li>div over</li> <li>div over</li> <li>div over</li> </ul> </div> </div>
Comments
Post a Comment