two Position Fixed on top

Question

I want to show two divs with position fixed on top .

HTML:

<div id="notice"> 
    <p>Announcement bla bla bla...</p>
        <span>CLOSE</span>
</div>
<div id="top">
    <p>search here</p>
</div>

CSS:

#notice {
    width:100%; height:50px; background:#FFFFFF; position:fixed; top:0; z-index:1;
}
#top {
    width:100%; height:50px; background:#197ac5; position:fixed; top:50px; z-index:1;
}

---

I'm trying to make it when i click on <span id="notice"> , then it will hide it, but also make #top replace position to top:0px; .

Is that possible to do this?

$("#notice span").click(function() {
        $("#notice").hide();
});

---

I look on http://www.ebay.com , and they had the same #notice but with no position:fixed; .

When I click "Close" on the eBay notice, it will hide it and will never show again in another page.

But, in my website, when I click the close button,

1. It will hide that #notice, but when I go to another page, it will show.

2. #top did not move to replace position:fixed; top:0px; position:fixed; top:0px; .

What's wrong with my code?

---

FINAL SOLUTION inspired by Marian

Thank you very much for all of u guys! especially Marian!

i ended up with this awesome plugins https://github.com/js-cookie/js-cookie

 $('#notice p').click(function() { $("#notice").hide(); Cookies.set('actionbar', 'hide'); }); var actionbar = Cookies.set('actionbar'); if (actionbar == 'hide') { $("#notice").hide(); }; 

Thanks Marian You save my life Tonight! i hope this post will be useful for all of the other guy :)

Answer 1

$("#notice span").click(function() {
   $("#notice").hide();
   $("#top").animate({"top": "0"}, 600);
});

Should work for your animation! To cache a function you can use a cookie something like this:

$(function() {
 if( document.cookie.indexOf( "runOnce" ) < 0 ) {
 // function to fire once only 
 document.cookie = "runOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
});

To keep it easy I would hide #notice on default, and show it using jQuery, until you have clicked #notice span :

<style>#notice {display: none;}</style>

$("#notice").show();

To put it all together (on a mobile device without testing it):

$(function() {
if( document.cookie.indexOf( "runOnce" ) < 0 ) {
     $("#notice").show();
     $("#notice span").click(function() {
        $("#notice").hide();
        $("#top").animate({"top": "0"}, 600);
        document.cookie = "runOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
    });
});

Answer 2

First thing

$("#notice span").click(function() {
        $("#notice").hide();
        $("#top").css("top","0px");
});

Second thing

You must have a cache technique for it to appear never again after clicked. Have a look : http://www.w3schools.com/html/html5_app_cache.asp

Answer 3

Question 1 :
You must use cookies to check if user closes a notice ( Or sessions ) [ Cookies can done by jQuery but Sessions require server.]
Question 2 :
You can create a container div and position it fixed on top then use position relative on child elements ( Notice boxes ) after you hide a notice it automatically goes to that place.
Hope it helps.