两个位置固定在顶部

Ching Ching 发表于 Dev

晴晴

我想说明两个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通知上单击“关闭”时，它将隐藏它，并且永远不会在另一个页面中显示。

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

它会隐藏该#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();
  };

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

玛丽安·里克（Marian Rick）

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。