快捷搜索:
来自 新京葡娱乐场网址 2019-08-18 11:59 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

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

交互式

交互式摄像演示

交互式的情趣是,导航条会直接地,大概登时响应页面滚动事件,这种样式可能会出于它操作起来的感觉,从用户体验看来是三个一石二鸟的小细节。然则它也许有不佳的一端:这种情势的本来面目决定了她必供给借助于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);

示范

那个德姆o的源代码中归纳了纯JavaScript(包容IE9 )和依附于jQuery的三种达成情势,固然去研讨去行使啊!

Demo地址

1 赞 收藏 评论

装进案例--更改背景颜色

图片 1

鼠标滚轴案例

wheelFn(oBox,changeBg);

var r =parseInt(Math.random()*255),

g =parseInt(Math.random()*255),

b =parseInt(Math.random()*255),

function changeBg(down) {

if(down) {

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

oBox.style.backgroundColor='rgb(' r ',' g ',' b ')';

r ,g ,b ;

if(r <0|| g <0||b <0) {return false;}

}else{

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

oBox.style.backgroundColor='rgb(' r ',' g ',' b ')';

r--,g--,b--;

}

}

机动遮掩导航条

「自动遮盖」意味着当用户在往下滚动页面时导航条将会破灭,但当用户有相当的大大概要求导航条的时候又能让它出现:用户已经滚动到页面尾部,大概开头向上滚动时。导航条的藏身至少有二种方式:交互式和轻松式。

学习资料

简单式

轻松式录制演示

这种格局,取决于JavaScript节流阀的周期设置,只怕不会有太多“获得答复”的以为。不管怎么说,这种情势对CPU会相比友好,加之动画是依据CSS来落到实处的,那代表咱们的想象力能够尽情抒发。

和此前交互式分化的是,这里的JavaScript并不间接退换CSS的质量,而是为因素插入或移除header--hidden这个CSS类

JavaScript

//... window.add伊夫ntListener( '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';

}

}

};

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:w3cplus学习笔记,自动隐藏的Sticky的Header

关键词: