兩個位置固定在上面

Question

我想顯示兩個分區與固定在頂部的位置。

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; 
} 

---

我試圖讓它當我 <span id="notice">點擊，那麼它會隱藏它， 也使 #top替換位置爲 top:0px;。

這可能嗎？

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

---

我期待在 http://www.ebay.com，和他們有同樣的#notice但沒有 position:fixed;。

當我在eBay通知上點擊「關閉」時，它會隱藏它並且不會再在另一頁顯示。

但是，在我的網站，當我點擊關閉按鈕，

1. 它將隱藏#notice，但是當我去到另一個網頁，它會顯示。

2. #top沒有移動替換position:fixed; top:0px;。

我的代碼有什麼問題？

---

瑪麗安

靈感最終的解決方案非常感謝您對於所有u傢伙！尤其是瑪麗安！

我結束了這真棒插件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(); 
    }; 

由於瑪麗安你救我一命今晚！我希望這篇文章對所有其他人都有用:)

Answer 1

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

應該適合你的動畫！要緩存功能，您可以使用一個Cookie是這樣的：

$(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=/"; 
}); 

爲了保持它容易我就藏在默認#notice，它使用jQuery，你點擊#notice span直到顯示：

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

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

爲了把它放在一起（在移動設備上沒有測試它）：

$(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

第一件事

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

第二件事

你必須有一個高速緩存技術，它出現不會再單擊後。 看一看：http://www.w3schools.com/html/html5_app_cache.asp

Answer 3

問題1：
必須使用cookies來檢查，如果用戶關閉的通知（或會話）Cookie可以通過jQuery的做，但會話需要服務器]
問題2：
你可以創建一個容器div並將其固定在頂部，然後在隱藏通知後自動進入該位置，在子元素（通知框）上使用相對位置。
希望它有幫助。