Анимировать навигационную маржу сверху при нажатии кнопки

У меня есть панель Cookie, установленная в верхней части моего сайта. При нажатии на кнопку значок, панель исчезает.Анимировать навигационную маржу сверху при нажатии кнопки

Из-за положения div, я также заставляю мой .nav элемент вниз на 64px.

Вопрос: Возможно ли, что, когда я нажимаю на значок Close что margin-top на моем .nav постепенно снижается до 0 тоже? С такой же скоростью анимации? Я не уверен, как добиться этого

Вот мой Demo: http://jsfiddle.net/ox19egn4/

Также, что это лучший способ, чтобы установить мой .nav в margin-top:0px навсегда после того, как пользователь увидел бар уведомление Cookie? Должен ли я просто установить его на 0 в моем CSS, но временно установить на 64px в JS?

/** 
 
* \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&nbsp;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>

Спасибо

источник

2015-12-07 michaelmcgurk

Если я хорошо понимаю вашу проблему, в функции hideContainer, вы можете добавить:

$('.nav').animate({ 
    'margin-top': 0 
}, 200);

или вы могли бы напрямую установить CSS свойство .nav:

top: 64px

и оживить это свойство в вашем javascript-коде.

источник

2015-12-07 10:26:42 ekqnp

Hi @ekqnp благодарит вас за это. Я обновил здесь: http://jsfiddle.net/ox19egn4/7/ Это фантастический ответ. Большое спасибо!!!! – michaelmcgurk

Я заметил, что после того, как я закрою его и перемещаю по сайту, у меня все еще есть «margin-top: 64px», примененный к '.nav'. Как установить его на '0' навсегда после закрытия панели? – michaelmcgurk

^Это сообщение для @ekqnp :) – michaelmcgurk

Я рекомендую использовать css конечно. Что-то вроде этого:

$('.close').click(function() { 
 
    $('.cookie').fadeOut(300, function(){ 
 
    $('.content').addClass('nocookie'); 
 
    }); 
 
});

.cookie { 
 
    text-align:center; 
 
    background:red; 
 
    color:#fff; 
 
    position:fixed; 
 
    width:100%; 
 
    left:0; 
 
    top:0; 
 
} 
 

 
.close { 
 
    font-size:80%; 
 
    color:inherit; 
 
} 
 

 
.content { 
 
    transform:translateY(20px); 
 
    transition:all .3s ease; 
 
} 
 

 
.content.nocookie { 
 
    transform:translateY(0px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="cookie">Cookie Cookie Cookie Cookie Cookie Cookie Cookie Cookie Cookie Cookie <a href="#" class="close">close</a></div> 
 
<div class="content">Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum</div>

источник

2015-12-07 10:21:05

Это блестяще !! Мне нужно сохранить код, который я использую прямо сейчас, но, возможно, я смогу объединить два набора кода вместе :-) – michaelmcgurk

Анимировать навигационную маржу сверху при нажатии кнопки

ответ

Смежные вопросы