>

自动遮盖的Sticky的Header,w3cplus学习笔记

- 编辑:至尊游戏网站 -

自动遮盖的Sticky的Header,w3cplus学习笔记

自动隐讳的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';

}

}

};

导航条的附加的片段景观

录像演示

微微时候,尤其在主页中时,在页面最上端使用更加大的导航条有利于获得访谈者的瞩目,大家须要四个格外的CSS类来支配导航条高度:

CSS

.header--narrow { height: 5em; }

1
2
3
4
.header--narrow
{
    height: 5em;
}

不过那个新定义的CSS类是由JavaScript来调节什么利用的——在页面开首滚动时累计,并在滚动到页面最上部时移除。

JavaScript

// ... window.addEventListener( 'scroll', throttle( throttleTimeout, function() { // ... if( wScrollCurrent > elNarrowOffset ) // toggles "narrow" classname { if( !hasElementClass( element, elClassNarrow ) ) addElementClass( element, elClassNarrow ); } else removeElementClass( element, elClassNarrow ); // ... })); // ...

1
2
3
4
5
6
7
8
9
10
11
12
13
// ...
window.addEventListener( 'scroll', throttle( throttleTimeout, function()
{
    // ...
    if( wScrollCurrent > elNarrowOffset ) // toggles "narrow" classname
    {
        if( !hasElementClass( element, elClassNarrow ) )
            addElementClass( element, elClassNarrow );
    }
    else removeElementClass( element, elClassNarrow );
    // ...
}));
// ...

鼠标滚抽滚动事件的包裹

/*

* 鼠标滚轴滚动事件封装

* @param target:加多事变的目的

* @param fn: 鼠标滚轴滚动后须求得以完成的效应函数

*/

function wheelFn(target,fn) {

/*

* 判定方向

* @param {e} 事件目的

* true: 向下滚动

*/

function direction(e) {

var oEvent = e ||event;

if(e.wheelDelta) {

if(e.wheelDelta<0) {

down =true;

}else{

down =false;

}

}else{

if(- e.detail<0) {

down =true;

}else{

down =false;

}

}

fn(down);

/* 阻止系统的暗中同意事件 */

oEvent.preventDefault&& oEvent.preventDefault();

return false;

}

/*

* 事件绑定

* @param target: 绑定事件的指标

* @param type: 绑定的事件类型

* @param fn

*/

function bandEvent(target,type,fn) {

if(target.attachEvent) {

target.attachEvent('on'+ type,fn);

}else{

target.addEventListener(type,fn,false);

}

}

/*

* 规定鼠标滚抽滚动的样子

*/

var down =true;

/* 浏览器宽容的管理 */

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

bandEvent(target,"DOMMouseScroll",direction);

}else{

bandEvent(target,'mousewheel',function(e) {

direction(e);

});

}

}

示范

这一个德姆o的源代码中回顾了纯JavaScript(宽容IE9+)和重视性于jQuery的三种达成形式,固然去切磋去行使啊!

Demo地址

1 赞 收藏 评论

装进使用案例--鼠标滚轴事件+自定义滚动条拖拽效果

HTML

<div id="wrap">

<div id="list">

<ul><li><a href="javascript:;"><img src="...jpg"></a></li><li><a href="javascript:;"><img src="...jpg"></a></li></ul>

</div><div id="scroll"><div id="bar"></div></div>

</div>

CSS

div,ul,li,a,img {padding: 0;margin: 0;list-style: none;text-decoration: none;}

#wrap {overflow: hidden;width: 600px;height: 550px;margin: 50px auto;}

#list {position: relative;width: 600px;height: 540px;overflow: hidden;}

#list ul {position: absolute;top: 0;left: 0;overflow: hidden;width: 2100px;height: 540px;}

#list li {float: left;}

#list img {display: inline-block;*display: inline;width: 350px;height: 540px;margin-right: 20px;}

#scroll {position: relative;width: 600px;height:10px;background-color: #ccc;border-radius: 5px;}

#bar {position: absolute;top: 0;left: 0;width: 100px;height: 10px;background: orangered;border-radius: 5px;}

JS

window.onload = function() {

var oWrap = document.getElementById('wrap');

var oUL = document.getElementsByTagName('ul')[0];

var oScroll = document.getElementById('scroll');

var oBar = document.getElementById('bar');

var l = 0;

//用于方向的鲜明

var down = true;

/* 图片总移动范围 */

var moveAreaImg = oUL.offsetWidth - oWrap.offsetWidth;

/* 滚动条总移动的限量 */

var moveAreaBar = oScroll.offsetWidth - oBar.offsetWidth;

//1.鼠标按下时

oBar.onmousedown = function(e) {

var oEvent = e || event;

//2.获得成分的开端地方

var x = oEvent.clientX - oBar.offsetLeft;

//3.鼠标按下并活动时,成分随之移动

document.onmousemove = function(ev) {

var oEv = ev || event;

//4.偏移间距

l = oEv.clientX - x;

changePosition(l);

};

//7.鼠标弹起时甘休运动

document.onmouseup = function() {

document.onmousemove = null;

document.onmouseup = null;

oBar.releaseCapture && oBar.releaseCapture();

};

//8.阻止私下认可事件

oBar.setCapture && oBar.setCapture();

return false;

};

/*

* 移动地点

* @param pos偏移间距

*/

function changePosition(pos) {

//5.节制移动区域

if (l <= 0) {

l = 0;

}

if (l >= (oScroll.offsetWidth - oBar.offsetWidth)) {

l = oScroll.offsetWidth - oBar.offsetWidth;

}

//比例

var scale = l / moveAreaBar;

//6.指标成分的运动

oBar.style.left = l + 'px';

//图片列表偏移间距:图片列表总移动范围*移动的比重

oUL.style.left = -(moveAreaImg*scale) + 'px';

}

/*

* 鼠标滚轴滚动事件封装

* @param target:增添事变的目的

* @param fn: 鼠标滚轴滚动后要求完成的意义函数

*

*/

function wheelFn(target,fn) {

/*

* 事件绑定

* @param target: 绑定事件的目的

* @param type: 绑定的事件类型

* @param fn

*/

function bandEvent(target,type,fn) {

if (target.attachEvent) {

target.attachEvent('on' + type, fn);

} else {

target.addEventListener(type, fn, false);

}

}

/*

* 推断方向

* @param {e} 事件目的

* true: 向下滚动

*/

function direction(e) {

var oEvent = e || event;

if (oEvent.wheelDelta) {

if (oEvent.wheelDelta < 0) {

//向下滚动

down = true;

} else {

//向上滚动

down = false;

}

} else {

if (-oEvent.detail < 0) {

down = true;

} else {

down = false;

}

}

fn(down);

/* 阻止系统的暗中认可事件 */

oEvent.preventDefault && oEvent.preventDefault();

return false;

}

/* 鼠标滚轴事件的十一分写法 */

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

bandEvent(target, "DOMMouseScroll", direction);

} else {

bandEvent(target, 'mousewheel', function (e) {

direction(e);

});

}

}

/*

*鼠标滚动时,滚动条也发出位移

*/

wheelFn(oWrap,function(down) {

if (down) {

//向下滚动的快慢

l += 22;

//产生偏移

changePosition(l);

} else {

l -= 22;

changePosition(l);

}

});

};

-

图片 1

滚轴事件案例

至于小编:吴鹏煜

图片 2

热血、勇气、创新意识和传说。(今日头条今日头条:@Nappp) 个人主页 · 作者的小说 · 13

图片 3

包裹案例--退换背景颜色

图片 4

鼠标滚轴案例

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--;

}

}

本文由软件综合发布,转载请注明来源:自动遮盖的Sticky的Header,w3cplus学习笔记