兩個位置固定在頂部

Question

我想顯示兩個 固定在頂部的 div 。

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; position:fixed; top:0px; 。

我的代碼有什么問題？

---

最終解決方案受到瑪麗安（Marian）的啟發

非常感謝你們你們！ 尤其是瑪麗安！

我最終得到了這個很棒的插件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 ，我默認情況下會隱藏#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：
您必須使用Cookie來檢查用戶是否關閉通知（或會話）[Cookies可以由jQuery完成，但Sessions需要服務器。
問題2 ：
您可以創建一個容器div並將其固定在頂部，然后在隱藏自動轉到該位置的通知后使用相對於子元素的位置（“通知”框）。
希望能幫助到你。