如何利用CSS样式+javascript制作缩放顶栏页面

我们常能在有的网页,看到缩放顶栏页面的效果图,那么是怎么制作出来的呢,下面可以跟随bluehost美国主机小编一起来看看的。

如何利用CSS样式+javascript制作缩放顶栏页面
如何利用CSS样式+javascript制作缩放顶栏页面

1.需要利用到div+css样式

顶栏其实是利用了css样式中的position属性需要将position属性设置为fixed

并且将top 与left 属性设置为0px

完整的顶栏css样式如下:

.div_cl_left {

    height: 85px; /* 顶栏菜单的长度*/

    width: 100%;/* 顶栏菜单的宽度*/

    position: fixed;/* 固定在浏览器页面上*/

    top: 0px; /* 顶栏距离浏览器上距离*/

    left: 0px;/* 顶栏距离浏览器左距离*/

    background-color: #2980b9; /* 顶栏菜单的颜色*/

    color: white; /*顶栏菜单中的字体颜色*/

margin-bottom: 2px; /*再设置一下边距*/

2.缩放需要利用到javascript进行判断,并且对于div样式进行切换需要利用到

getElementById函数,并且我们需要设置监听浏览器滑动栏的像素位移

旧标准是使用:document.documentElement.scrollTop

新标准需要使用:window.scrollY

完整的JavaScript代码如下:

Function top-div(){

 var ODiv = document.getElementById(“div1”); //获取顶栏的div

 var OB = window.scrollY; //新标准获取浏览器侧边滑动像素

var OB = document.documentElement.scrollTop;//老标准获取浏览器侧边滑动像素

if (OB >= 425){

ODiv.className = “div_cl_left”;  //当浏览器的侧边栏位移到425像素的时候,切换顶栏样式

} else{

 ODiv.className = “div_cl”;//否则还是使用之前的样式

}

}

setInterval(showdiv, 100); //旧标准添加一个循环监听,但是这样浏览器开销很大导致页面访问速度会慢

window.addEventListener(“scroll”, showdiv)//新标准添加一个被动监听的代码,使得访问更加流畅

3.对应的html代码

<!DOCTYPE html>

<html>

<head>

    <meta charset=”UTF-8″>

    <!– import JavaScript –>

    <link rel=”stylesheet” href=”{{url_for(‘static’,filename=’webrun.css’)}}“>

</head>

<body id=”body1″ class=”body1″>

    <div class=”div_cl” id=”div1″>

        <div class=”div_cl_top”>

            <span class=”text_relt_clss”>我是logo</span>

            <span class=”text_left_clss” id=”text1″ >我是子页面1</span>

            <span class=”text_left_clss”id=”text2″>我是子页面2</span>

            <span class=”text_left_clss”id=”text3″>我是子页面3</span>

        </div>

    </div>

    <div class=”cl2″ id=”div3″>

    </div>

    <div class=”cl2″>

    </div>

    <div class=”cl2″>

    </div>

    <div class=”cl2″>

    </div>

</body>

</html>

<script src=”{{‘static/webrun.js’}}“></script>

4.设置初始的顶栏css样式

.div_cl {

    height: 600px; /* 顶栏菜单初始长*/

    width: 100%;

    background-color: #3498db; /* 顶栏菜单初始颜色*/

    color: white;

    margin-bottom: 2px;

}

1.需要利用到div+css样式

顶栏其实是利用了css样式中的position属性需要将position属性设置为fixed

并且将top 与left 属性设置为0px

完整的顶栏css样式如下:

.div_cl_left {

height: 85px; /* 顶栏菜单的长度*/

width: 100%;/* 顶栏菜单的宽度*/

position: fixed;/* 固定在浏览器页面上*/

top: 0px; /* 顶栏距离浏览器上距离*/

left: 0px;/* 顶栏距离浏览器左距离*/

background-color: #2980b9; /* 顶栏菜单的颜色*/

color: white; /*顶栏菜单中的字体颜色*/

margin-bottom: 2px; /*再设置一下边距*/

2. 缩放需要利用到javascript进行判断,并且对于div样式进行切换需要利用到

getElementById函数,并且我们需要设置监听浏览器滑动栏的像素位移

旧标准是使用:document.documentElement.scrollTop

新标准需要使用:window.scrollY

完整的JavaScript代码如下:

Function top-div(){

var ODiv = document.getElementById(“div1”); //获取顶栏的div

var OB = window.scrollY; //新标准获取浏览器侧边滑动像素

var OB = document.documentElement.scrollTop;//老标准获取浏览器侧边滑动像素

if (OB >= 425){

ODiv.className = “div_cl_left”; //当浏览器的侧边栏位移到425像素的时候,切换顶栏样式

} else{

ODiv.className = “div_cl”;//否则还是使用之前的样式

}

}

setInterval(showdiv, 100); //旧标准添加一个循环监听,但是这样浏览器开销很大导致页面访问速度会慢

window.addEventListener(“scroll”, showdiv)//新标准添加一个被动监听的代码,使得访问更加流畅

3. 对应的html代码

我是logo

我是子页面1

我是子页面2

我是子页面3

4. 设置初始的顶栏css样式

.div_cl {

height: 600px; /* 顶栏菜单初始长*/

width: 100%;

background-color: #3498db; /* 顶栏菜单初始颜色*/

color: white;

margin-bottom: 2px;

}

相关内容推荐:div+css布局介绍

Add a Comment

电子邮件地址不会被公开。 必填项已用*标注