兩個位置固定在上面

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

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通知上點擊「關閉」時，它會隱藏它並且不會再在另一頁顯示。

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

它將隱藏#notice，但是當我去到另一個網頁，它會顯示。
#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(); 
    };

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

來源

2015-07-12 Ching Ching

會沒有所有的粗體更具可讀性:-) –

我已更新我的答案，包括您的問題的第二部分！ –

@tony，即時通訊對不起:) :) –

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

來源

2015-07-12 19:07:04

感謝瑪麗安爲您的答案！，我嘗試你的解決方案，首先，它的工作原理，但使用cookie後，不再工作if（document.cookie.indexOf（「runOnce」）<0 ）{ –

你不再工作是什麼意思？你能描述一下應該發生什麼，那不會發生？加載時'＃notice' div是否仍然彈出？ –

謝謝瑪麗安你真正的MVP！ –

第一件事

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

第二件事

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

來源

2015-07-12 19:09:20 divy3993

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

來源

2015-07-12 19:11:04 Farsad

兩個位置固定在上面

回答

相關問題