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

当我点击易趣通知上的“关闭”时，它会隐藏并且永远不会再显示。

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

将隐藏#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();
  };

谢谢玛丽安你今晚拯救我的生命！我希望这篇文章对所有其他人都有用：）

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

两个位置固定在顶部

3 个答案: