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ɑ:e?] 父親,父
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小時內與您取得聯系。

整合營銷服務商