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;`.

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 :)