css可应用的渐进增强新特性

1. 让有滚动行为的元素平滑滚动  scroll-behavior: smooth;

<div class="smooth">

</dvi>

.smooth {

  scroll-behavior: smooth;

}

一个用处就是通过 <a href="#id"> 实现的页面内部滚动

支持浏览器:Chrome Firefox Opera

2. 粘性导航定位 position:sticky 

<nav style="position:sticky;top:10px">

</nav>

当nav导航从开始滚动到距视窗顶部10px时,变为fixed特性,不再随页面一起滚动,实现粘性导航效果

在各式浏览器支持良好

 

posted @ 2018-05-17 16:27  杜培东  阅读(412)  评论(0编辑  收藏  举报