How to make Sticky ad or sticky div with close button?
HTML Code
|
1 2 3 4 5 6 7 8 9 |
<div id="T4Tutorials_UP1" class="T4Tutorials"> <div class="T4Tutorials_UP" > <h2>Welcome</h2> <a class="Exit" href="#T4Tutorials_UP1">×</a> <div class="Main_Main_Content"> This is the div showing the Main_Content </div> </div> </div> |
CSS Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
.T4Tutorials { position: fixed; bottom: 0; height: 90px; left: 0; right: 0; background
: red; transition: opacity 500ms; visibility: visible; opacity: 1; } .T4Tutorials:target { visibility: hidden; opacity: 0; display:none } .T4Tutorials_UP { margin: 5px auto; padding: 0px; background: #fff; border-radius: 5px; width: 80%; position: relative; } .T4Tutorials_UP h2 { margin-top: 0; color: green; font-family: Tahoma, Arial, sans-serif; } .T4Tutorials_UP .Exit { position: absolute; top: -40px; right: 0px; font-size: 30px; font-weight: bold; text-decoration: none; color: blue; background-color: chartreuse; } .T4Tutorials_UP .Exit:hover { color: orange; } .T4Tutorials_UP .Main_Content { max-height: 30%; overflow: auto; } |
Download Code