两个位置固定在顶部

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 通知上的 "Close" 时，它会隐藏它 并且永远不会在另一个页面中再次显示 。

但是，在我的网站中，当我点击关闭按钮时，

它会隐藏那个#notice，但是当我转到另一个页面时，它会显示。
#top没动替换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();
  };

谢谢玛丽安，今晚你救了我的命！我希望这个 post 对其他所有人都有用:)

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：
您必须使用 cookie 来检查用户是否关闭通知（或会话）[Cookie 可以由 jQuery 完成，但会话需要服务器。]
问题 2：
您可以创建一个容器 div 并将其固定在顶部，然后在隐藏通知后在子元素（通知框）上使用相对位置它会自动转到该位置。
希望能帮助到你。

两个位置固定在顶部

two Position Fixed on top

jquery

html

css

hide