WordPress实现导航条与侧边栏固定跟随页面浮动

对于wordpress,一直想把网页的导航条与侧边栏设置成“固定跟随页面浮动”的效果,新手果然是新手,用了好长时间才学会如何处理这个问题。

解决思路

用两个JS

<script type="text/javascript" src="/js/scrollmonitor.js"></script>
<script type="text/javascript" src=“/js/slides.js"></script>

导航档为

<div id="menu-box">

当鼠标向下移动,或侧边条向下滑动时,该代码变成了

<div id="menu-box"class="shadow">

怎么实现的?

原来是scrollmonitor.js中有:

    accountWatcher.visibilityChange(function() {
        $header.toggleClass('shadow', !accountWatcher.isInViewport);
    });
    headerWatcher.visibilityChange(function() {
        $minisb.toggleClass('shadow', !headerWatcher.isInViewport);
    });

 

还需记得修改相应的CSS,如

#menu-box {
background: #fff;
width: 100%;
height: 80px;
z-index: 999;
*+right: 0;
border-bottom: 1px solid #ebebeb;
transition-duration: .3s;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03);
}

#menu-box.shadow {
top: 0;
position:fixed;
height: 70px;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 0 5px #888;
}

网上有另一个方法,没试过,先记下来

只需要修改其属性position: fixed;就可以将它“固定”在网页某个位置,不随网页上下拉动而消失,另外添加z-index: 99;属性,使该层处于最顶层。这样会产生一个问题:导航条会偏离,不在网页中心对称,网页缩放或因电脑分辨率不同,会显得错版很不美观。这时只需改动它的宽度使width: 100%;即可。

上述方法对于一般的最顶端导航条都有效……设置好导航条浮动之后,网页会整体上移一点点,只需给下面整个层添加padding-top属性,具体值自己可以调试确定。

发表新评论
Gravatar图片显示区