Jquery控制页面达到或滚动到预定的高度效果

我们需要滚动页面到达某个高度时，菜单就会点亮所属该处的菜单项；当我们需要快速定位时，就点击所属的菜单项，让页面滑到要定位的高度。

html代码：

</div>

</a>

</ul>

</div>

</header>

<section class="banner" id="banner">banner</section>

<section class="service" id="service">about</section>

<section class="reason"id="reason" >reason</section>

<section class="price" id="price">price</section>

<section class="footer"id="footer" >footer</section>

</html>

css代码

.banner,.about,.service,.team,.show,.reason,.price,.footer{

height:500px;

color:black;

font-size:28px;

}

.header .menu {

padding-top: 20px;

}

.header .menu ul{

list-style: none;

}

.header .menu li {

float: left;

padding: 5px 10px;

margin-left: 3px;

}

.header .active {

color: #e6400c;

}

js代码

<script>.

$(function() {

$(window).scroll(function() {

var _height = $(document).scrollTop();

//导航

if(_height > 100) {

$('.js_header').css({

'position': 'fixed',

'top': '0',

'right': '0',

'left': '0'

})

} else {

$('.js_header').css({

'position': 'relative',

'top': '0',

'right': '0',

'left': '0'

})

}

ADDCALSS(_height, '.banner', 0);

ADDCALSS(_height, '.about', 1);

ADDCALSS(_height, '.service', 2);

ADDCALSS(_height, '.team', 3);

ADDCALSS(_height, '.show', 4);

ADDCALSS(_height, '.reason', 5);

ADDCALSS(_height, '.price', 6);

ADDCALSS(_height, '.footer', 7);

});

function ADDCALSS(_height, _classsName, _index) {

var _serviceH = $(_classsName).offset().top;

if(_height > _serviceH-60) {

$('.js_menu a').removeClass("active");

$('.js_menu a').eq(_index).addClass("active");

}

$('.js_menu a').on('click', function(event) {

event.preventDefault();//阻止默认行为

$('html,body').animate({

scrollTop: $("#" + this.href.split("#")[1]).offset().top

}, 600);

$('.js_menu a').removeClass('active');

$(this).addClass('active');

});

})

</script>.

很棒的一个效果不是吗？

ay01

absolute ['æbsəlu:t] 绝对的，完全的
active ['æktiv] 活动的，激活的，<a>标签点击
align [ə'lain] 对齐
alpha ['ælfə] 透明度，半透明
anchor ['æŋkə] 锚记<a>标记是这个单词的缩写
arrow ['ærəu] 箭头
auto ['ɔ:təu] 自动的

day02

background ['bækgraund] 背景
banner ['bænə] 广告, 横幅
black [blæk] 黑色
blink： [bliŋk] 闪亮,闪烁
block [blɔk] 块
blue [blu:] 蓝色
body ['bɔdi] 主体，一个HTML标记
bold [bəuld] 加粗
border ['bɔ:də] 边框、框线边框
both [bəuθ] 两者(都);两个(都);是clear属性的一个属性值
bottom ['bɔtəm] 底;底部，是一个CSS属性
box [bɔks] 箱;盒;匣
br 换行标记
bug [bʌg] 程序设计上的错误，漏洞等
building ['bildiŋ] 建筑
button ['bʌtn] 按钮

day03

cell [sel] 表格中的单元格
center ['sentə] 居中
centimeter ['senti,mi:tə] 厘米
child [tʃaild] 孩子
circle ['sə:kl] 圆圈
class [klɑ:s] 类别
clear [kliə] 清除
color ['kʌlə] 颜色
connected [kə'nektid] 连结的
contact ['kɔntækt] 联系
content [kən'tent] 内容
css 层叠样式表
cursor ['kə:sə] 鼠标指针

day04

dashed [dæʃt] 虚线CSS边框常用的一种
decimal ['desiməl] 十进制
decoration [,dekə'reiʃən] 装饰
default [di'fɔ:lt] 默认的
design [di'zain] 设计
display [di'splei ] 显示，CSS的一个属性
division [di'viʒən] 分区，div就是这个单词的缩写
document ['dɔkjumənt] 文件文档
dotted ['dɔtid] 点线
double ['dʌbl] 双线

day05

element ['elimənt] 元素
father ['fɑ:ðə] 父亲,父
filter ['filtə] 过滤层；滤器
first [fə:st] 第一个
fixed [fikst] 固定的，不变的
float [fləut] 浮动
font [fɔnt] 字体
for 在循环语句中的一个保留字
gif 一种图像格式
gray [grei] 灰色
green [gri:n] 绿色

day06

hand [hænd] 手
head [hed] 头部
height [hait] 高度
help [help] 帮助
here [hiə] 这里
hidden ['hidn] 被隐藏
home [həum] 首页
horizontal [,hɔri'zɔntl] 水平的
hover ['hʌvə] 鼠标指针经过或称为悬浮状态

day07

image ['imidʒ] 图像
important [im'pɔ:tənt] 重要的
indent [in'dent] 缩进
index ['indeks] 索引
inline 行内
inner 内部的
italic [i'tælik] 意大利体，斜体
jpg 一种图像格式
justify ['dʒʌstifai] 两端对齐

day08

language ['læŋgwidʒ] 语言
last [lɑ:st] 最后一个
left [left] 左边
length [leŋθ] 长度
level ['levl] 级别，例如block-level就是块级
line [lain] 线
link [liŋk] 链接
list [list] 列表
lowercase ['ləuə,keis] 小写
margin ['mɑ:dʒin] 外边距
max 最大的
medium ['mi:diəm] 中间
menu ['menju:] 菜单
middle ['midl] 中间
millimeter ['mili,mi:tə] 毫米
min 最小的
model ['mɔdl] 模型
move [mu:v] 移动

day09

navigation [,nævi'geiʃən] 导航
new [nju:] 新的
none [nʌn] 无，没有
normal ['nɔ:məl] 标准
object ['ɔbdʒikt] 对象
oblique [əb'li:k] 一种斜体
only ['əunli] 仅仅
open ['əupən] 打开
optional ['ɔpʃənəl] 可选的
orange ['ɔ:rindʒ] 橙色
outer ['autə] 外面的
overflow [,əuvə'fləu] 溢出
padding ['pædiŋ] 内边距
point [pɔint] 点
pointer ['pɔintə] 指针，指示器
position [pə'ziʃən] 定位，位置
progress ['prəugres] 进度
public ['pʌblik] 公开的
purple ['pə:pl] 紫色

day10

red [red] 红色
relative ['relətiv] 相对的
repeat [ri'pi:t] 重复，平铺
replacement [ri'pleismənt] 替换
resize 重新设置大小
right [rait] 右边
row [rəu] 行
scroll [skrəul] 滚动
shadow ['ʃædəu] 阴影
silver ['silvə] 银色
size [saiz] 尺寸
solid ['sɔlid] 固体，实线
solution [sə'lu:ʃən] 方案
span [spæn] 一个HTML标记
special ['speʃəl] 特殊的
square [skwɛə] 方块
static ['stætik] 静态的
strong [strɔŋ] 强壮，加粗的
style [stail] 样式

day11

table ['teibl] 表格
td 单元格的HTML标记
text [tekst] 文本
thick [θik] 粗的
thin [θin] 细的
three [θi:] 三个
through [θru:] 穿过
title ['taitl] 标题
top [tɔp] 顶部
tr 表格中“行”的HTML标记
transitional [træn'ziʃənəl] 过渡的
type [taip] 类型

day12

underline [,ʌndə'lain] 下划线
upper ['ʌpə] 上面的
uppercase ['ʌpə,keis] 大写
url 网址
vertical ['və:tikəl] 竖直的
visited ['vizit] 访问过的
while [hwail] 白色的
width [widθ] 宽度

几天我在面试前端开发同学的时候，有问到关于margin基础布局相关内容的过程中，发现很多同学基本解释不清楚，今天刚好有点时间就整理了一篇笔记出来。就以下5点在CSS布局经常会用到的经典布局解决方案。

css中margin外边距（重叠）合并现象
css中margin外边距穿透现象
css中margin设置负值时的特性
css经典3列自适应布局：圣杯布局
css经典3列自适应布局：双飞翼布局

可以尝试动手试一试，有什么疑问！可随时交流，有问必答。

margin 纵向重叠（合并）问题

元素垂直排列时，第一个元素的下外边距与第二个元素的上外边距会发生合并，合并后的间距就是两者中最大的那个值。

1、以下代码中，item1与item4之间的间距是多少？

<style>
    .box{
        margin-top:10px;/*上外边距*/
        margin-bottom:20px;/*下外边距*/
        height: 20px;
        background-color:skyblue;
    }
</style>
<body>
    <div class="box">item1</div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">item4</div>
</body>

答案：

解析：item1 与 item4 之间的间距为 3个下外边距大小+2个盒子高度=20*3+20*2=100px

2、以下代码中，item1与item4之间的间距是多少？

<style>
    .box{
        margin-top:10px;
        margin-bottom:20px;
        background-color:skyblue;
    }
</style>
<body>
    <div class="box">item1</div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">item4</div>
</body>

答案： item1与item4之间间距为 20px

解析：因为中间两个box中没有内容也没有边框线，所以外边距会一直重叠合并，所以最后item1和item4之间距离只有一个下外边距的大小

3、以下代码中 container 、 item 、box与浏览器顶部的间距是多少？

margin 穿透问题

当一个元素包含在另一个元素中时,如果父元素没有设置内边距或边框把外边距分隔开，它们的上或下外边距也会发生合并。

<style>
    body{
        margin:0;
        padding:0;
    }
    .container{
        width:300px;
        height: 300px;
        background-color: salmon;   
        margin-top:100px;/*与浏览器顶部的距离*/
        border:5px solid blue;
    }
    .container .item{
        width:200px;
        height: 200px;
        background-color: skyblue;
        margin-top:50px;/*因为container中加了border边框，所以这里的外边距不会穿透合并*/
    }
    .container .item .box{
        width:100px;
        height: 100px;
        background-color: bisque;
        margin-top:10px;/*item没有加边框线，内边距和其它内容，所以外边距会发生穿透合并*/
        border:5px solid red;
    }
</style>
<body>
    <div class="container">
        <div class="item">
            <div class="box"></div>
        </div>
    </div>
</body>

答案： 100px 、155px、155px
解析：
.container与浏览器顶部距离是100px，
.item与浏览器顶部距离100px + 5px+50px=155px
.box与浏览器顶部距离：100px+5px+50px=155px

margin负值问题

margin-left 设置负值，元素向左移动
margin-right 设置负值，自身不受影响，右边元素向左移动
margin-top设置负值，元素向上移动
margin-bottom 设置负值，自身不受影响，下方元素向上移动

1、两元素水平排列，左右外边距设置负值时

<style>
    body{
        margin:0;
    }
    .container{
        width:500px;
        height:200px;
        padding:20px 0px;
        border:5px solid #ddd;
        margin:0px auto;
    }
    .container .common{
        width:200px;
        height: 200px;
        float: left;
    }
    .container .box1{
        background-color: skyblue;
        /* margin-left:-100px; 元素自身向左移动，右边的元素也会受影响*/
        margin-right:-100px;/*元素自身不受影响，右边元素向左移动*/
    }
    .container .box2{
        background-color: tomato;
    }
</style>
<body>
    <div class="container">
        <div class="box1 common"></div>
        <div class="box2 common"></div>
    </div>
</body>

当.container .box1中margin-left:-100px;时，如：图1
当.container .box1中 margin-right:-100px;时，如：图2
当.container .box1设置margin-left:-100px;和margin-right:-100px时，如：图3

2、两元素垂直排列，上下外边距设置负值时

<style>
    body{
        margin:0;
    }
    .container{
        height: 500px;
        width: 200px;
        padding:0px 20px;
        border:5px solid #ddd;
        margin-top:100px;
    }
    .container .common{
        width:200px;
        height: 200px;
    }
    .container .box1{
        background-color: skyblue;
        /*margin-top:-100px;元素向上移动，下方元素也会受影响*/
        margin-bottom:-100px;/*自身不受影响，下方元素向上移动*/
    }
    .container .box2{
        background-color: rgba(0,0,255,0.5);
    }
</style>

<body>
    <div class="container">
        <div class="box1 common"></div>
        <div class="box2 common"></div>
    </div>
</body>

当.container .box1中margin-top:-100px时，如：图 1
当.container .box1中margin-bottom:-100px时，如：图 2
当.container .box1中同时设置margin-top:-100px; 和margin-bottom:-100px;时，如：图 3

3、经典布局：圣杯布局

这种布局的优点：
中间一栏内容最重要，最先加载和渲染，同时对搜索引擎优化最利。
两边内容固定，中间内容自适应

<style>
    body{
        margin:0;
        /*核心代码*/
        min-width: 650px;/*当页面宽度不够时，出现滚动条而不会造成布局错乱*/
    }
    .clearfix::after{
        display: block;
        content: "";
        clear: both;
    }
    .fl{/*核心代码*/
        float:left;/*三个盒子一定要添加浮动*/
    }
    .header{
        height: 100px;
        background-color: tomato;
    }

    .container{
        padding-left:200px;/*左边预留200px位置  用来放left*/
        padding-right:250px;/*右边预留200px位置  用来放right*/
    }
    .container .center{
        width:100%;/*自适应container的宽度，实现自适应缩放*/
        height: 500px;
        background-color: skyblue;
    }
    .container .left{
        width:200px;
        height: 500px;
        background-color:cadetblue;
        /*核心代码*/
        margin-left:-100%;/*盒子向左移，因为加了浮动，所以会移动到上一行的最左边*/
        position: relative;/*利用相对定位，再把盒子往左移200px就占据了最左边预留的200px空间*/
        left:-200px;
    }
    .container .right{
        width:250px;
        height: 500px;
        background-color:aquamarine;
        /*核心代码*/
        margin-right:-250px;/*加上这个代码，相当于right没有一点宽度，就会移动到上的最右边位置*/
    }
    .footer{
        height: 100px;
        background-color: #000;
    }
</style>
<body>
    <div class="header">头部</div>
    <div class="container clearfix">
        <div class="center fl">中间</div>
        <div class="left fl">左边</div>
        <div class="right fl">右边</div>
    </div>
    <div class="footer">底部</div>
</body>

4、经典布局：双飞翼布局

这种布局的优点：
中间一栏内容最重要，最先加载和渲染，同时对搜索引擎优化最利。
两边内容固定，中间内容自适应

<style>
    body{
        margin:0;
    }
    .fl{/*核心代码*/
        float: left;/*一定要添加浮动*/
    }
    .main{
        background-color: #ddd;
        width:100%;
    }
    .main .main-content{
        background-color: skyblue;
        height: 300px;
        /*核心代码*/
        margin:0 200px 0 200px;/*盒子左右两边余留200px，分别给left和right来占用*/
    }
    .left{
        width: 200px;
        height: 300px;
        background-color: coral;
        /*核心代码*/
        margin-left:-100%;/*往左移动浏览器的宽度，最后移动到上一行的最左边*/
    }
    .right{
        width: 200px;
        height: 300px;
        background-color: tomato;
        /*核心代码*/
        margin-left:-200px;/*相当于自身宽度为0了，因为加了浮动，然后就显示在了上一行的最右边*/
    }
</style>
<body>
    <div class="main fl">
        <div class="main-content">中间</div>
    </div>
    <div class="left fl">左边</div>
    <div class="right fl">右边</div>
</body>

为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30天挑战学习计划》，内容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真实企业项目开发，云服务器部署上线，从入门到精通

PC端项目开发（1个）
移动WebApp开发（2个）
多端响应式开发（1个）

共4大完整的项目开发！一行一行代码带领实践开发，实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态，省得浪费时间。

从学习一开始就同步使用 Git 进行项目代码的版本的管理，Markdown 记录学习笔记，包括真实大厂项目的开发标准和设计规范，命名规范，项目代码规范，SEO优化规范

从蓝湖UI设计稿到 PC端，移动端，多端响应式开发项目开发

真机调试，云服务部署上线；
Linux环境下的 Nginx 部署，Nginx 性能优化；
Gzip 压缩，HTTPS 加密协议，域名服务器备案，解析；
企业项目域名跳转的终极解决方案，多网站、多系统部署；
使用使用 Git 在线项目部署；

这些内容在《30天挑战学习计划》中每一个细节都有讲到，包含视频+图文教程+项目资料素材等。只为实力宠粉，真正一次掌握企业项目开发必备技能，不走弯路！

过程中【不涉及】任何费用和利益，非诚勿扰。

如果你没有添加助理老师微信，可以添加下方微信，说明要参加30天挑战学习计划，来自头条号！老师会邀请你进入学习，并给你发放相关资料

30 天挑战学习计划 Web 前端从入门到实战 | arry老师的博客-艾编程

在线咨询

上一篇：HTML 字符实体
下一篇：一张图带你看懂HTML 5的六大优势

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商