Jquery控制頁面達到或滾動到預(yù)定的高度效果

我們需要滾動頁面到達某個高度時，菜單就會點亮所屬該處的菜單項；當(dāng)我們需要快速定位時，就點擊所屬的菜單項，讓頁面滑到要定位的高度。

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

//導(dǎo)航

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] 程序設(shè)計上的錯誤，漏洞等
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] 連結(jié)的
contact ['k?nt?kt] 聯(lián)系
content [k?n'tent] 內(nèi)容
css 層疊樣式表
cursor ['k?:s?] 鼠標指針

day04

dashed [d??t] 虛線CSS邊框常用的一種
decimal ['desim?l] 十進制
decoration [,dek?'rei??n] 裝飾
default [di'f?:lt] 默認的
design [di'zain] 設(shè)計
display [di'splei ] 顯示，CSS的一個屬性
division [di'vi??n] 分區(qū)，div就是這個單詞的縮寫
document ['d?kjum?nt] 文件文檔
dotted ['d?tid] 點線
double ['d?bl] 雙線

day05

element ['elim?nt] 元素
father ['fɑ:e?] 父親,父
filter ['filt?] 過濾層；濾器
first [f?:st] 第一個
fixed [fikst] 固定的，不變的
float [fl?ut] 浮動
font [f?nt] 字體
for 在循環(huán)語句中的一個保留字
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?] 鼠標指針經(jīng)過或稱為懸浮狀態(tài)

day07

image ['imid?] 圖像
important [im'p?:t?nt] 重要的
indent [in'dent] 縮進
index ['indeks] 索引
inline 行內(nèi)
inner 內(nèi)部的
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] 導(dǎo)航
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?] 內(nèi)邊距
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] 重復(fù)，平鋪
replacement [ri'pleism?nt] 替換
resize 重新設(shè)置大小
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] 靜態(tài)的
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 網(wǎng)址
vertical ['v?:tik?l] 豎直的
visited ['vizit] 訪問過的
while [hwail] 白色的
width [widθ] 寬度

幾天我在面試前端開發(fā)同學(xué)的時候，有問到關(guān)于margin基礎(chǔ)布局相關(guān)內(nèi)容的過程中，發(fā)現(xiàn)很多同學(xué)基本解釋不清楚，今天剛好有點時間就整理了一篇筆記出來。就以下5點在CSS布局經(jīng)常會用到的經(jīng)典布局解決方案。

css中margin外邊距（重疊）合并現(xiàn)象
css中margin外邊距穿透現(xiàn)象
css中margin設(shè)置負值時的特性
css經(jīng)典3列自適應(yīng)布局：圣杯布局
css經(jīng)典3列自適應(yīng)布局：雙飛翼布局

可以嘗試動手試一試，有什么疑問！可隨時交流，有問必答。

margin 縱向重疊（合并）問題

元素垂直排列時，第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并，合并后的間距就是兩者中最大的那個值。

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中沒有內(nèi)容也沒有邊框線，所以外邊距會一直重疊合并，所以最后item1和item4之間距離只有一個下外邊距的大小

3、以下代碼中 container 、 item 、box與瀏覽器頂部的間距是多少？

margin 穿透問題

當(dāng)一個元素包含在另一個元素中時,如果父元素沒有設(shè)置內(nèi)邊距或邊框把外邊距分隔開，它們的上或下外邊距也會發(fā)生合并。

<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沒有加邊框線，內(nèi)邊距和其它內(nèi)容，所以外邊距會發(fā)生穿透合并*/
        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 設(shè)置負值，元素向左移動
margin-right 設(shè)置負值，自身不受影響，右邊元素向左移動
margin-top設(shè)置負值，元素向上移動
margin-bottom 設(shè)置負值，自身不受影響，下方元素向上移動

1、兩元素水平排列，左右外邊距設(shè)置負值時

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

當(dāng).container .box1中margin-left:-100px;時，如：圖1
當(dāng).container .box1中 margin-right:-100px;時，如：圖2
當(dāng).container .box1設(shè)置margin-left:-100px;和margin-right:-100px時，如：圖3

2、兩元素垂直排列，上下外邊距設(shè)置負值時

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

當(dāng).container .box1中margin-top:-100px時，如：圖 1
當(dāng).container .box1中margin-bottom:-100px時，如：圖 2
當(dāng).container .box1中同時設(shè)置margin-top:-100px; 和margin-bottom:-100px;時，如：圖 3

3、經(jīng)典布局：圣杯布局

這種布局的優(yōu)點：
中間一欄內(nèi)容最重要，最先加載和渲染，同時對搜索引擎優(yōu)化最利。
兩邊內(nèi)容固定，中間內(nèi)容自適應(yīng)

<style>
    body{
        margin:0;
        /*核心代碼*/
        min-width: 650px;/*當(dāng)頁面寬度不夠時，出現(xiàn)滾動條而不會造成布局錯亂*/
    }
    .clearfix::after{
        display: block;
        content: "";
        clear: both;
    }
    .fl{/*核心代碼*/
        float:left;/*三個盒子一定要添加浮動*/
    }
    .header{
        height: 100px;
        background-color: tomato;
    }

    .container{
        padding-left:200px;/*左邊預(yù)留200px位置  用來放left*/
        padding-right:250px;/*右邊預(yù)留200px位置  用來放right*/
    }
    .container .center{
        width:100%;/*自適應(yīng)container的寬度，實現(xiàn)自適應(yīng)縮放*/
        height: 500px;
        background-color: skyblue;
    }
    .container .left{
        width:200px;
        height: 500px;
        background-color:cadetblue;
        /*核心代碼*/
        margin-left:-100%;/*盒子向左移，因為加了浮動，所以會移動到上一行的最左邊*/
        position: relative;/*利用相對定位，再把盒子往左移200px就占據(jù)了最左邊預(yù)留的200px空間*/
        left:-200px;
    }
    .container .right{
        width:250px;
        height: 500px;
        background-color:aquamarine;
        /*核心代碼*/
        margin-right:-250px;/*加上這個代碼，相當(dāng)于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、經(jīng)典布局：雙飛翼布局

這種布局的優(yōu)點：
中間一欄內(nèi)容最重要，最先加載和渲染，同時對搜索引擎優(yōu)化最利。
兩邊內(nèi)容固定，中間內(nèi)容自適應(yīng)

<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;/*相當(dāng)于自身寬度為0了，因為加了浮動，然后就顯示在了上一行的最右邊*/
    }
</style>
<body>
    <div class="main fl">
        <div class="main-content">中間</div>
    </div>
    <div class="left fl">左邊</div>
    <div class="right fl">右邊</div>
</body>

為幫助到一部分同學(xué)不走彎路，真正達到一線互聯(lián)網(wǎng)大廠前端項目研發(fā)要求，首次實力寵粉，打造了《30天挑戰(zhàn)學(xué)習(xí)計劃》，內(nèi)容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真實企業(yè)項目開發(fā)，云服務(wù)器部署上線，從入門到精通

PC端項目開發(fā)（1個）
移動WebApp開發(fā)（2個）
多端響應(yīng)式開發(fā)（1個）

共4大完整的項目開發(fā) ！一行一行代碼帶領(lǐng)實踐開發(fā)，實際企業(yè)開發(fā)怎么做我們就是怎么做。從學(xué)習(xí)一開始就進入工作狀態(tài)，省得浪費時間。

從學(xué)習(xí)一開始就同步使用 Git 進行項目代碼的版本的管理，Markdown 記錄學(xué)習(xí)筆記，包括真實大廠項目的開發(fā)標準和設(shè)計規(guī)范，命名規(guī)范，項目代碼規(guī)范，SEO優(yōu)化規(guī)范

從藍湖UI設(shè)計稿到 PC端，移動端，多端響應(yīng)式開發(fā)項目開發(fā)

真機調(diào)試，云服務(wù)部署上線；
Linux環(huán)境下的 Nginx 部署，Nginx 性能優(yōu)化；
Gzip 壓縮，HTTPS 加密協(xié)議，域名服務(wù)器備案，解析；
企業(yè)項目域名跳轉(zhuǎn)的終極解決方案，多網(wǎng)站、多系統(tǒng)部署；
使用使用 Git 在線項目部署；

這些內(nèi)容在《30天挑戰(zhàn)學(xué)習(xí)計劃》中每一個細節(jié)都有講到，包含視頻+圖文教程+項目資料素材等。只為實力寵粉，真正一次掌握企業(yè)項目開發(fā)必備技能，不走彎路！

過程中【不涉及】任何費用和利益，非誠勿擾。

如果你沒有添加助理老師微信，可以添加下方微信，說明要參加30天挑戰(zhàn)學(xué)習(xí)計劃，來自頭條號！老師會邀請你進入學(xué)習(xí)，并給你發(fā)放相關(guān)資料

30 天挑戰(zhàn)學(xué)習(xí)計劃 Web 前端從入門到實戰(zhàn) | arry老師的博客-艾編程

在線咨詢

上一篇：HTML 字符實體
下一篇：一張圖帶你看懂HTML 5的六大優(yōu)勢

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商