网页的navbar的css设置

发表于   |   分类于   |  

一般网页都会把navbar放在页面的最顶段，然后等网页滚动一定的距离，navbr就变成fixed固定在页面的顶端，这是最基本的navbar样式了。

absolute 变成 fixed

我之前都是把navbar放在header里面，然后让header由absolute定位变成fixed定位，这种情况设置在document.body.scrollTop大于0的时候产生变化比较合适，基本就不会看到什么变化，当然可以变换一下其他的css样式，比如padding，background啊，然而这样的话，好像没什么必要，不如一开始就使用fixed定位，然后再网页滚动添加其他的css样式。
难点在于，比如设置$(document).scrollTop()>300时，再让header变为fixed，这样navbar就会在scrollTop大于300的时候突然出现，显得十分突兀，我试了好多办法都不能解决好这种问题，用js添加动画效果是很难的，因为这种变化事件是注册在window.scroll事件里面的，一般滚动一下都要触发好几次这样的事件，所以js动画有点行不通。
我以前都是这样做的，我现在觉得自己好傻。

RELATIVE变为FIXED

之前我试过用由relative或者没有定位的header进行变换 ，但是这样又会出现一个问题： 当header变成fixed的时候，网页的高度由于失去了原来的header，就会猛地缩小一下，等到变回来的时候，由突然变高，这样浏览起来很诡异。 所以当时我就放弃了，现在我发现了一个新的方式，来解决这种问题。
不要再最外层header上添加fixed，让header一直都保留在文档流内，我们要让header的子元素变成fixed定位，同时给一个固定的高度给header， 比如：

<header>
    <navbar>
        <ul>
        ...
        </ul>
    </navbar>
</header>

header {width:100px;}

我们要把fixed加载navbar元素上，这样就不会影响到网页的高度了，然后我们解决，navbar的过度效果，不能让他突然就出现，要让她慢慢的出现：

navbar {top: -100px;trantion: top .3s ease}
navbar.fixed {position: fixed;top: 0;left:0}

因为navbar开始没有定位，所以top的设置是不起作用的，但是当navbar添加了fixed类的话，top变成了0，因为navbar上设置了transition，navbar的top就会有原来 -100px过度到0，这样就实现了navbar的过度效果，很简单。