WordPress使用Cookie Yes插件实现页面刷新后保留Cookie点击后的CSS修改

问题原因 #

你当前编写的JS逻辑仅在用户点击「接受全部」/「拒绝」Cookie按钮的瞬间修改导航栏、main元素的top样式，页面刷新后JS不会主动识别用户之前的Cookie同意状态，元素的样式会回到初始状态，就会出现顶部的预留空白。

解决方案 #

Cookie Yes插件会在用户完成同意操作后，在本地存储名为viewed_cookie_policy的Cookie，值为yes即代表用户已经处理过Cookie提示。你只需要在页面加载时就判断该Cookie状态，符合条件直接修改对应样式即可。
修改后的完整代码如下：

// 封装通用的调整顶部距离的函数，避免重复代码
function adjustHeaderPosition() {
    $('html.has-not-scrolled #desktop-header').css('top', '0px');
    $('#mobile-header').css('top', '0px');
    $('main').css('top', '0px');
}

// 读取Cookie的工具函数
function getCookie(name) {
    let value = "; " + document.cookie;
    let parts = value.split("; " + name + "=");
    if (parts.length === 2) return parts.pop().split(";").shift();
}

$(document).ready(function(){
    // 页面加载时先判断是否已经同意过Cookie
    if(getCookie('viewed_cookie_policy') === 'yes') {
        adjustHeaderPosition();
    }

    $('#cookieToggle').on('change', function(){
        const value = $(this).prop('checked');
        onCookieSelection(value);    
    });

    function onCookieSelection (val) {
        $('#divAcceptCookiesConfirm').toggle(val);
        $('#divAcceptCookiesReject').toggle(!val);
    }  
    $('#cookieToggle').prop("checked", true);
    onCookieSelection(true);

    // 点击按钮时调用公共函数修改样式
    $('#wt-cli-accept-all-btn, #wt-cli-reject-btn').on('click', function() {
        adjustHeaderPosition();
    });
});

额外优化建议 #

如果后续不想用内联样式控制，也可以预先在CSS里定义好类：

.cookie-accepted #desktop-header,
.cookie-accepted #mobile-header,
.cookie-accepted main {
    top: 0 !important;
}

之后判断用户同意Cookie后，直接给html标签加cookie-accepted类即可，样式管理更清晰。

内容的提问来源于stack exchange，提问作者Jon