两个位置固定在顶部

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并将其固定在顶部，然后在隐藏自动转到该位置的通知后使用相对于子元素的位置（“通知”框）。
希望能帮助到你。