w3cplus学习笔记,自动隐藏的Sticky的Header

作者: 前端知识  发布:2019-08-22

自动隐藏的Sticky的Header

2015/07/22 · CSS · Header, Sticky

本文由 伯乐在线 - 吴鹏煜 翻译,JustinWu 校稿。未经许可,禁止转载!
英文出处:osvaldas.info。欢迎加入翻译组。

让Sticky Header自动隐藏是一个一箭双雕的好办法,一来可以在任何页面任何地方都可以访问到导航条,二来可以节省页面空间。我的客户Easy Shine就非常乐意在自己的网站上使用这个技术,这个技术同时也在我的网站上实现了(viewport小于768px时可以看到效果)。

使导航条固定

XHTML

<header class="header" role="banner"> <!-- ... --> </header>

1
2
3
<header class="header" role="banner">
    <!-- ... -->
</header>

CSS

.header { width: 100%; height: 7.5em; position: fixed; z-index: 1000; top: 0; left: 0; }

1
2
3
4
5
6
7
8
9
.header
{
    width: 100%;
    height: 7.5em;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
}

这里有一些浅显易懂的HTML/CSS代码,无论页面滚动到何处,导航条都会固定在页面顶部。现在,我们如何让它自动隐藏?

学习资料

自动隐藏导航条

「自动隐藏」意味着当用户在往下滚动页面时导航条将会消失,但当用户有可能需要导航条的时候又能让它出现:用户已经滚动到页面底部,或者开始向上滚动时。导航条的隐藏至少有两种形式:交互式和简单式。

鼠标滚轴事件,考虑到兼容性:

交互式

交互式视频演示

交互式的意思是,导航条会直接地,或者立刻响应页面滚动事件,这种形式或许会由于它操作起来的感觉,从用户体验看来是一个良好的小细节。不过它也有不好的一面:这种形式的本质决定了他必须要依赖于JavaScript,我们不能使用JS事件节流阀(在指定的时间周期内只调用某个函数一次)。基本上这就意味着每次滚动事件产生都要产生计算,并且会毫无意义的占用CPU。幸运的是,大多数情况下这只是理论,实际上因为计算量实在太微不足道而通常不会遇到这种问题。

滚动事件产生时,JS算法会计算并修改CSS中的top属性。

JavaScript

//... window.addEventListener( 'scroll', function() { //... if( wScrollCurrent <= 0 ) // 滚动到页面顶部; 元素保持在页面顶部 element.style.top = '0px'; else if( wScrollDiff > 0 ) // 向上滚动事件; 元素插入页面 element.style.top = ( elTop > 0 ? 0 : elTop ) 'px'; else if( wScrollDiff < 0 ) // 向下滚动事件 { if( wScrollCurrent wHeight >= dHeight - elHeight ) // 滚动到页面底部; 元素插入页面 element.style.top = ( ( elTop = wScrollCurrent wHeight - dHeight ) < 0 ? elTop : 0 ) 'px'; else // 向下滚动事件; 元素消失 element.style.top = ( Math.abs( elTop ) > elHeight ? -elHeight : elTop ) 'px'; } //... }); //...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//...
window.addEventListener( 'scroll', function()
{
    //...
    if( wScrollCurrent <= 0 ) // 滚动到页面顶部; 元素保持在页面顶部
        element.style.top = '0px';
 
    else if( wScrollDiff > 0 ) // 向上滚动事件; 元素插入页面
        element.style.top = ( elTop > 0 ? 0 : elTop ) 'px';
 
    else if( wScrollDiff < 0 ) // 向下滚动事件
    {
        if( wScrollCurrent wHeight >= dHeight - elHeight )  // 滚动到页面底部; 元素插入页面
            element.style.top = ( ( elTop = wScrollCurrent wHeight - dHeight ) < 0 ? elTop : 0 ) 'px';
 
        else // 向下滚动事件; 元素消失
            element.style.top = ( Math.abs( elTop ) > elHeight ? -elHeight : elTop ) 'px';
    }
    //...
});
//...

firefox

使用DOMMouseScroll,但该事件需要使用addEventListener()来绑定;

ff中使用事件对象中的detail属性来获取滚轮滚动的值,向上滚是负值,向下滚是正值;

为了统一同一滚动方向的值的正负一致,执行取反操作;

栗子:

document.addEventListener('DOMMouseScroll',function(e) {

var oEvent = e || event;

alert(e.detail);

},false);

简单式

简单式视频演示

这种形式,取决于JavaScript节流阀的周期设置,或许不会有太多“得到回应”的感觉。不管怎么说,这种形式对CPU会比较友好,加之动画是基于CSS来实现的,这意味着我们的想象力可以尽情发挥。

和之前交互式不同的是,这里的JavaScript并不直接改变CSS的属性,而是为元素插入或移除header--hidden这个CSS类

JavaScript

//... window.addEventListener( 'scroll', throttle( throttleTimeout, function() { //... if( wScrollCurrent <= 0 ) // 滚动到页面顶部; 元素保持在页面顶部 removeElementClass( element, elClassHidden ); else if( wScrollDiff > 0 && hasElementClass( element, elClassHidden ) ) // 向上滚动事件; 元素插入页面 removeElementClass( element, elClassHidden ); else if( wScrollDiff < 0 ) // 向下滚动事件 { if( wScrollCurrent wHeight >= dHeight && hasElementClass( element, elClassHidden ) ) // 滚动到页面底部; 元素插入页面 removeElementClass( element, elClassHidden ); else // 向下滚动事件; 元素消失 addElementClass( element, elClassHidden ); } //... })); //...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//...
window.addEventListener( 'scroll', throttle( throttleTimeout, function()
{
    //...
    if( wScrollCurrent <= 0 ) // 滚动到页面顶部; 元素保持在页面顶部
        removeElementClass( element, elClassHidden );
 
    else if( wScrollDiff > 0 && hasElementClass( element, elClassHidden ) ) // 向上滚动事件; 元素插入页面
        removeElementClass( element, elClassHidden );
 
    else if( wScrollDiff < 0 ) // 向下滚动事件
    {
        if( wScrollCurrent wHeight >= dHeight && hasElementClass( element, elClassHidden ) ) // 滚动到页面底部; 元素插入页面
            removeElementClass( element, elClassHidden );
 
        else // 向下滚动事件; 元素消失
            addElementClass( element, elClassHidden );
    }
    //...
}));
//...

在CSS中我们这样定义:

JavaScript

.header { -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000 ); transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000 ); -webkit-transition-property: -webkit-transform; transition-property: transform; } .header--hidden { -webkit-transform: translateY( -100% ); -ms-transform: translateY( -100% ); transform: translateY( -100% ); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.header
{
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
 
    -webkit-transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000 );
    transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000 );
 
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
}
 
.header--hidden
{
    -webkit-transform: translateY( -100% );
    -ms-transform: translateY( -100% );
    transform: translateY( -100% );
}

chrome,firefox,safair,ie,opera等

使用mousewheel;

这些浏览器中使用事件对象的wheelDelta属性来获取滚轮滚动的值,上滚为正,下滚为负;

栗子:

document.onmousewheel = function(e) {

var oEvent = e || event;

console.log(e.wheelDelta);

};

案例--改变元素的尺寸

HTML

<div id="box"></div>

CSS

#box {width: 200px;height: 300px; background: orange;}

JS

window.onload=function() {

var oBox =document.getElementById('box');

//判断方向

var down =true;

if(window.navigator.userAgent.toLocaleLowerCase().indexOf('firefox') !== -1) {

/*火狐*/

oBox.addEventListener("DOMMouseScroll",function(e) {

varoEvent = e ||event;

/*统一滚动值,同一方向值要么为正值,要么为负值*/

if(-oEvent.detail<0) {

//向下

down =true;

}else{

//向上

down =false;

}

changeSize(down);

},false)

}else{

oBox.onmousewheel=function(e) {

varoEvent = e ||event;

if(e.wheelDelta<0) {

down =true;

}else{

down =false;

}

changeSize(down);

};

}

function changeSize(down) {

if(down) {

oBox.style.height= oBox.offsetHeight 10 'px';

}

else{

oBox.style.height= oBox.offsetHeight-10 'px';

}

}

};

本文由金沙澳门官网发布于前端知识,转载请注明出处:w3cplus学习笔记,自动隐藏的Sticky的Header

关键词: 金沙澳门官网

上一篇:学习历程,我的前端学习历程
下一篇:没有了