如何修复标题在wordpress中不能粘？

Question

我已经添加了像粘贴标题这样的新功能，尤其是在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建议修复，并且有另一个问题，如何在第一次打开网站之前修复在徽标后显示粘贴标题，然后滚动如下概念：

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。您需要知道带徽标的标题何时不在视线范围内，然后将菜单置于位置：固定

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

Sticky 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();
    });
});

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

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

将上面给出的jQuery代码与此粘性类属性一起使用。

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