1
我在我的网站顶部固定了一个Cookie栏。 当关闭图标被点击时，栏会消失。当点击按钮时动画导航栏的页边距
由于div的位置，我也迫使我的.nav元素下降64px。
问：是否有可能，当我点击Close图标我.nav的margin-top逐渐减小到0吗？有着类似的动画速度？我不能确定如何实现这一目标
这里是我的演示：http://jsfiddle.net/ox19egn4/
此外，怎样设置我的.nav到margin-top:0px用户已经看到了饼干条通知后永久的最好方法？ 我应该在我的CSS中将其设置为0，但在JS中暂时设置为64px？
/**
* \t
* JQUERY EU COOKIE LAW POPUPS
* version 1.0.0
*
* Code on Github:
* https://github.com/wimagguc/jquery-eu-cookie-law-popup
*
* To see a live demo, go to:
* http://www.wimagguc.com/2015/04/jquery-eu-cookie-law-popup/
*
* by Richard Dancsi
* http://www.wimagguc.com/
*
*/
(function($) {
// for ie9 doesn't support debug console >>>
if (!window.console) window.console = {};
if (!window.console.log) window.console.log = function() { };
// ^^^
var EuCookieLawPopup = (function() {
\t var _self = this;
\t ///////////////////////////////////////////////////////////////////////////////////////////////
\t // PARAMETERS (MODIFY THIS PART) //////////////////////////////////////////////////////////////
\t _self.params = {
\t \t cookiePolicyUrl : '/cookie-privacy-policy/',
\t \t popupPosition : 'bottom',
\t \t colorStyle : 'default',
\t \t compactStyle : false,
\t \t popupTitle : 'This site uses cookies to store information on your computer',
\t \t popupText : '',
\t \t buttonContinueTitle : 'Learn more',
\t \t buttonLearnmoreTitle : 'Learn more',
\t \t buttonLearnmoreOpenInNewWindow : true,
\t \t agreementExpiresInDays : 30,
\t \t autoAcceptCookiePolicy : true,
\t \t htmlMarkup : null
\t };
\t ///////////////////////////////////////////////////////////////////////////////////////////////
\t // VARIABLES USED BY THE FUNCTION (DON'T MODIFY THIS PART) ////////////////////////////////////
\t _self.vars = {
\t \t INITIALISED : false,
\t \t HTML_MARKUP : null,
\t \t COOKIE_NAME : 'EU_COOKIE_LAW_CONSENT'
\t };
\t ///////////////////////////////////////////////////////////////////////////////////////////////
\t // PRIVATE FUNCTIONS FOR MANIPULATING DATA ////////////////////////////////////////////////////
\t // Overwrite default parameters if any of those is present
\t var parseParameters = function(object, markup, settings) {
\t \t if (object) {
\t \t \t var className = $(object).attr('class') ? $(object).attr('class') : '';
\t \t \t if (className.indexOf('eupopup-top') > -1) {
\t \t \t \t _self.params.popupPosition = 'top';
\t \t \t }
\t \t \t else if (className.indexOf('eupopup-fixedtop') > -1) {
\t \t \t \t _self.params.popupPosition = 'fixedtop';
\t \t \t }
\t \t \t else if (className.indexOf('eupopup-bottomright') > -1) {
\t \t \t \t _self.params.popupPosition = 'bottomright';
\t \t \t }
\t \t \t else if (className.indexOf('eupopup-bottomleft') > -1) {
\t \t \t \t _self.params.popupPosition = 'bottomleft';
\t \t \t }
\t \t \t else if (className.indexOf('eupopup-bottom') > -1) {
\t \t \t \t _self.params.popupPosition = 'bottom';
\t \t \t }
\t \t \t else if (className.indexOf('eupopup-block') > -1) {
\t \t \t \t _self.params.popupPosition = 'block';
\t \t \t }
\t \t \t if (className.indexOf('eupopup-color-default') > -1) {
\t \t \t \t _self.params.colorStyle = 'default';
\t \t \t }
\t \t \t else if (className.indexOf('eupopup-color-inverse') > -1) {
\t \t \t \t _self.params.colorStyle = 'inverse';
\t \t \t }
\t \t \t if (className.indexOf('eupopup-style-compact') > -1) {
\t \t \t \t _self.params.compactStyle = true;
\t \t \t }
\t \t }
\t \t if (markup) {
\t \t \t _self.params.htmlMarkup = markup;
\t \t }
\t \t if (settings) {
\t \t \t if (typeof settings.cookiePolicyUrl !== 'undefined') {
\t \t \t \t _self.params.cookiePolicyUrl = settings.cookiePolicyUrl;
\t \t \t }
\t \t \t if (typeof settings.popupPosition !== 'undefined') {
\t \t \t \t _self.params.popupPosition = settings.popupPosition;
\t \t \t }
\t \t \t if (typeof settings.colorStyle !== 'undefined') {
\t \t \t \t _self.params.colorStyle = settings.colorStyle;
\t \t \t }
\t \t \t if (typeof settings.popupTitle !== 'undefined') {
\t \t \t \t _self.params.popupTitle = settings.popupTitle;
\t \t \t }
\t \t \t if (typeof settings.popupText !== 'undefined') {
\t \t \t \t _self.params.popupText = settings.popupText;
\t \t \t }
\t \t \t if (typeof settings.buttonContinueTitle !== 'undefined') {
\t \t \t \t _self.params.buttonContinueTitle = settings.buttonContinueTitle;
\t \t \t }
\t \t \t if (typeof settings.buttonLearnmoreTitle !== 'undefined') {
\t \t \t \t _self.params.buttonLearnmoreTitle = settings.buttonLearnmoreTitle;
\t \t \t }
\t \t \t if (typeof settings.buttonLearnmoreOpenInNewWindow !== 'undefined') {
\t \t \t \t _self.params.buttonLearnmoreOpenInNewWindow = settings.buttonLearnmoreOpenInNewWindow;
\t \t \t }
\t \t \t if (typeof settings.agreementExpiresInDays !== 'undefined') {
\t \t \t \t _self.params.agreementExpiresInDays = settings.agreementExpiresInDays;
\t \t \t }
\t \t \t if (typeof settings.autoAcceptCookiePolicy !== 'undefined') {
\t \t \t \t _self.params.autoAcceptCookiePolicy = settings.autoAcceptCookiePolicy;
\t \t \t }
\t \t \t if (typeof settings.htmlMarkup !== 'undefined') {
\t \t \t \t _self.params.htmlMarkup = settings.htmlMarkup;
\t \t \t }
\t \t }
\t };
\t var createHtmlMarkup = function() {
\t \t if (_self.params.htmlMarkup) {
\t \t \t return _self.params.htmlMarkup;
\t \t }
\t \t var html =
\t \t \t '<div class="eupopup-container' +
\t \t \t ' eupopup-container-' + _self.params.popupPosition +
\t \t \t (_self.params.compactStyle ? ' eupopup-style-compact' : '') +
\t \t \t \t ' eupopup-color-' + _self.params.colorStyle + '">' +
\t \t \t \t '<div class="eupopup-head">' + _self.params.popupTitle + '</div>' +
\t \t \t \t '<div class="eupopup-body">' + _self.params.popupText + '</div>' +
\t \t \t \t '<div class="eupopup-buttons">' +
\t \t \t \t '<a href="#" class="eupopup-button eupopup-button_1">' + _self.params.buttonContinueTitle + '</a>' +
\t \t \t \t '<a href="' + _self.params.cookiePolicyUrl + '"' +
\t \t \t \t \t (_self.params.buttonLearnmoreOpenInNewWindow ? ' target=_blank ' : '') +
\t \t \t \t \t ' class="eupopup-button eupopup-button_2">' + _self.params.buttonLearnmoreTitle + '</a>' +
\t \t \t \t '<div class="clearfix"></div>' +
\t \t \t \t '</div>' +
\t \t \t \t '<a href="#" class="eupopup-closebutton"><img src="/images/icons/svg/close.svg"></a>' +
\t \t \t '</div>';
\t \t return html;
\t };
\t // Storing the consent in a cookie
\t var setUserAcceptsCookies = function(consent) {
\t \t var d = new Date();
\t \t var expiresInDays = _self.params.agreementExpiresInDays * 24 * 60 * 60 * 1000;
\t \t d.setTime(d.getTime() + expiresInDays);
\t \t var expires = "expires=" + d.toGMTString();
\t \t document.cookie = _self.vars.COOKIE_NAME + '=' + consent + "; " + expires + ";path=/";
\t \t $(document).trigger("user_cookie_consent_changed", {'consent' : consent});
\t };
\t // Let's see if we have a consent cookie already
\t var userAlreadyAcceptedCookies = function() {
\t \t var userAcceptedCookies = false;
\t \t var cookies = document.cookie.split(";");
\t \t for (var i = 0; i < cookies.length; i++) {
\t \t \t var c = cookies[i].trim();
\t \t \t if (c.indexOf(_self.vars.COOKIE_NAME) == 0) {
\t \t \t \t userAcceptedCookies = c.substring(_self.vars.COOKIE_NAME.length + 1, c.length);
\t \t \t }
\t \t }
\t \t return userAcceptedCookies;
\t };
\t
\t var hideContainer = function() {
\t \t // $('.eupopup-container').slideUp(200);
\t \t $('.eupopup-container').animate({
\t \t \t opacity: 0,
\t \t \t height: 0
\t \t }, 200, function() {
\t \t \t $('.eupopup-container').hide(0);
\t \t });
\t };
\t ///////////////////////////////////////////////////////////////////////////////////////////////
\t // PUBLIC FUNCTIONS //////////////////////////////////////////////////////////////////////////
\t var publicfunc = {
\t \t // INITIALIZE EU COOKIE LAW POPUP /////////////////////////////////////////////////////////
\t \t init : function(settings) {
\t \t \t parseParameters(
\t \t \t \t $(".eupopup").first(),
\t \t \t \t $(".eupopup-markup").html(),
\t \t \t \t settings);
\t \t \t // No need to display this if user already accepted the policy
\t \t \t if (userAlreadyAcceptedCookies()) {
\t \t \t \t return;
\t \t \t }
\t \t \t // We should initialise only once
\t \t \t if (_self.vars.INITIALISED) {
\t \t \t \t return;
\t \t \t }
\t \t \t _self.vars.INITIALISED = true;
\t \t \t // Markup and event listeners >>>
\t \t \t _self.vars.HTML_MARKUP = createHtmlMarkup();
\t \t \t if ($('.eupopup-block').length > 0) {
\t \t \t \t $('.eupopup-block').append(_self.vars.HTML_MARKUP);
\t \t \t } else {
\t \t \t \t $('BODY').append(_self.vars.HTML_MARKUP);
\t \t \t }
\t \t \t $('.eupopup-button_1').click(function() {
\t \t \t \t setUserAcceptsCookies(true);
\t \t \t \t hideContainer();
\t \t \t \t return false;
\t \t \t });
\t \t \t $('.eupopup-closebutton').click(function() {
\t \t \t \t setUserAcceptsCookies(true);
\t \t \t \t hideContainer();
\t \t \t \t return false;
\t \t \t });
\t \t \t // ^^^ Markup and event listeners
\t \t \t // Ready to start!
\t \t \t $('.eupopup-container').show();
\t \t \t // In case it's alright to just display the message once
\t \t \t if (_self.params.autoAcceptCookiePolicy) {
\t \t \t \t setUserAcceptsCookies(true);
\t \t \t }
\t \t }
\t };
\t return publicfunc;
});
$(document).ready(function() {
\t if ($(".eupopup").length > 0) {
\t \t (new EuCookieLawPopup()).init({
\t \t \t 'info' : 'YOU_CAN_ADD_MORE_SETTINGS_HERE',
\t \t \t 'popupTitle' : 'This site uses cookies to store information on your computer',
\t \t \t 'popupText' : '',
\t \t \t 'buttonLearnmoreTitle' : ''
\t \t });
\t }
});
}(jQuery));.eupopup-container {
position: relative;
z-index: 190;
top: 0;
width: 100%;
height: 64px;
background: #4a4a4a;
text-align: center;
padding-top: 5px;
display: block;
}
.nav {
position:fixed;
top:0;
margin-top: 64px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<div class="nav">
<img src="http://placehold.it/1200x300">
</div>
</div>谢谢
嗨@ekqnp谢谢你。我已经在这里更新：http://jsfiddle.net/ox19egn4/7/这是一个梦幻般的答案。非常感谢！！！！ – michaelmcgurk
我发现在关闭它并浏览网站后，我仍然有'margin-top：64px'应用于'.nav'。关闭栏后如何将其永久设置为“0”？ – michaelmcgurk
^@ekqnp的邮件:) – michaelmcgurk