如何修复 header 不能粘在 wordpress 中？

Question

我已经添加了粘性 header 等新功能，尤其是在 my development website 上的自定义主题 wordpress 中，关于导航无法在徽标后粘性的意外结果如下面的屏幕截图所示：

这里style.css

.site-navigation {
    width: 100%;
    background: #fff;
    font-family: Arial;
    font-weight: bold;
    color: #252525;
    letter-spacing: 0.25px;
    border-bottom: 1px solid #e2e2e2;
    margin-bottom: 3%;
    position: fixed; 
    top: 0;
    bottom: auto;
}

.outer {
    position: relative;
}

.outer .site-navigation {
    width: 100%;
    background: #fff;
    font-family: Arial;
    font-weight: bold;
    color: #252525;
    letter-spacing: 0.25px;
    border-bottom: 1px solid #e2e2e2;
    margin-bottom: 3%;
    position: absolute;
    bottom: 0;
    z-index: 2;
    top: auto;
}

如何修复它才能得到与 this tutorial 相同的结果？

更新#2：

我已经根据@Saypontigohe 的建议向我的自定义主题添加了 javascript 并且几乎没有修改 css，但仍然不走运。

这里js代码：

jQuery(document).ready(function($) {
   window.onscroll = effects;
function effects(){
    var topdis = (document.documentElement && document.documentElement.scrollTop) ||  document.body.scrollTop;//distance between top and scroll position
    var scrollHeight = (document.getElementById("action").clientHeight)-200; //height of client scroll, 200 is the amount of pixels from the header


    if(topdis < scrollHeight ){ //if the distance is less than the header height, normal position
        document.getElementById("site-navigation").style.position= "relative";
    }
    else if(topdis >= scrollHeight ){ ///if the distance is more than the header height, fixed position
        document.getElementById("site-navigation").style.position= "fixed";                
    }
}
});

更新#1：

它已经根据@iyyappan 的建议修复了，还有另一个问题是如何修复在第一次打开网站之前在徽标后显示粘性 header，如下面的概念所示：

Answer 1

请试试这个。

.site-navigation {
    clear: both !important;
    position: fixed;
    z-index: 99;
}

编辑：

.site-header {
    background-color: #ff870f;
    border-bottom: 1px solid #ffffff;
    margin: 0 auto;
    min-height: 100px;
    position: fixed;
    text-align: center;
    width: 100%;
    z-index: 99 !important;
}
.site-navigation {
    background: #ffffff none repeat scroll 0 0;
    border-bottom: 1px solid #e2e2e2;
    bottom: auto;
    color: #252525;
    font-family: Arial;
    font-weight: bold;
    letter-spacing: 0.25px;
    margin-bottom: 3%;
    position: fixed;
    top: 100px;
    width: 100%;
    z-index: 99;
}

在站点导航旁边应用以下样式，

<div class="main-content" style="padding-top: 200px;">

Answer 2

你需要为此使用 javascript。您需要知道带徽标的 header 什么时候看不见，然后打开菜单 position:fixed

window.onscroll = effects;
function effects(){
    var topdis = (document.documentElement && document.documentElement.scrollTop) ||  document.body.scrollTop;//distance between top and scroll position
    var scrollHeight = (document.getElementById("action").clientHeight)-200; //height of client scroll, 200 is the amount of pixels from the header


    if(topdis < scrollHeight ){ //if the distance is less than the header height, normal position
        document.getElementById("menu").style.position= "relative";
    }
    else if(topdis >= scrollHeight ){ ///if the distance is more than the header height, fixed position
        document.getElementById("menu").style.position= "fixed";                
    }
}

使用插件或编辑 WP 模板以放入 javascript 代码，并将元素 ID 更改为主题中的特定元素

Answer 3

置顶Header

jQuery(document).ready(function() {
    //Enter Your Class or ID
    var $stickyMenu = jQuery('.main-nav');

    var stickyNavTop = jQuery($stickyMenu).offset().top;

    //Get Height of Navbar Div
    var navHeight = jQuery($stickyMenu).height();

    var stickyNav = function(){
        var scrollTop = jQuery(window).scrollTop();
        if (scrollTop > stickyNavTop) { 
            jQuery($stickyMenu).addClass('sticky');
            jQuery('html').css('padding-top', navHeight + 'px')
        } else {
            jQuery($stickyMenu).removeClass('sticky');
            jQuery('html').css('padding-top', '0')
        }
    };

    stickyNav();

    jQuery(window).scroll(function() {
        stickyNav();
    });
});

只需将此部分添加到页脚并添加菜单 class。

演示：http://jsfiddle.net/cybentizen/Lxrn3nkL/

使用上面给定的 jQuery 代码和此粘性 class 属性。

.sticky{
  position: fixed;
    top: 0;
    z-index: 9999;
    width: 100%;
    margin-top: 0px;
}

如何修复 header 不能粘在 wordpress 中？

How to fix header cannot sticky in wordpress?

html

css

wordpress

wordpress-theming

置顶Header