前端学习第七弹:固定位置的导航

导航条固定在窗口顶端,拖动滚动条其位置不会变化。做到最后对于css中的“position”属性很是不解,尤其是设置margin和padding后,各种眩晕,待会展示一下,具体的探索见下一篇对于该属性的随笔小记。


  
    
	
  
  
    

这里是一个固定的导航界面

该内容会随着滚动条上下移动

效果图如下:

前端学习第七弹:固定位置的导航_第1张图片

是不是有点懵,原谅我的色感~~~划分不同的色块主要是为了区分不同的

,顶端的导航条高度为80px,白色区域的滚动区上外边距为100px,所以二者之间会有缝隙,看看拖动滚动条的效果:

前端学习第七弹:固定位置的导航_第2张图片

注意到滚动区往上前进了一段距离,而导航栏却没有动,这个时候将类header中的top和left删掉效果如下:

前端学习第七弹:固定位置的导航_第3张图片

可以看出导航条和滚动区域的上边界重合,且都距离上边框100px,这里涉及的位置属性的内容见下篇博客~~

你可能感兴趣的:(前端之路)