利用jQuery實(shí)現(xiàn)導(dǎo)航欄在下拉一定高度后固定在頂部

TML代碼就不展示了，重點(diǎn)展示一下實(shí)現(xiàn)導(dǎo)航欄固定的jQuery核心代碼。

$(window).scroll(function(){

if($(window).scrollTop()>100){

$(".nav").addClass("fixed");

}else{

$(".nav").removeClass("fixed");

}

});

tickUp 插件當(dāng)向下拖動(dòng)頁(yè)面時(shí)，可以讓任何頁(yè)面元素，固定在瀏覽器窗口的頂部。
GitHub地址：https://github.com/LiranCohen/stickUp

簡(jiǎn)單使用方法：

引用JS（jquery 和stickUp）
<script src="js/jquery.min.js"></script>
<script src="js/stickUp.min.js"></script>
編寫JAVASCRIPT實(shí)現(xiàn)

jQuery(function($) {

$(document).ready( function() {

$('.navbar-wrapper').stickUp();

});

們?cè)谠O(shè)計(jì)網(wǎng)站的時(shí)候，有時(shí)候?yàn)榱梭w現(xiàn)出別具一格的風(fēng)格，往往會(huì)設(shè)計(jì)出一些特殊的風(fēng)格。這里就舉一個(gè)比較常見(jiàn)的例子 —— 傾斜的背景顏色。

在CSS中，沒(méi)有某一個(gè)屬性能夠直接實(shí)現(xiàn)傾斜的背景顏色，而是需要通過(guò)一些“手段”來(lái)實(shí)現(xiàn)。最常想到的方案就是在內(nèi)容的底部放置一個(gè)div，給這個(gè)div設(shè)定一個(gè)背景顏色，然后讓這個(gè)div傾斜一個(gè)角度，從而實(shí)現(xiàn)傾斜的背景顏色。比如像下圖所示的案例：

那么下面就來(lái)用一個(gè)基本的實(shí)例來(lái)解釋并實(shí)現(xiàn)傾斜背景的效果：

首先要說(shuō)明一下，頁(yè)面導(dǎo)航條是固定在頁(yè)面頂部的，導(dǎo)航條不會(huì)隨著頁(yè)面的滾動(dòng)而移動(dòng)。這個(gè)效果的實(shí)現(xiàn)非常簡(jiǎn)單，就是利用了 position 這個(gè)屬性的 fixed 值來(lái)實(shí)現(xiàn)的。

我下面的代碼實(shí)例中，HTML用來(lái)給頁(yè)面上添加元素，而在 CSS 部分需要精細(xì)化的設(shè)定屬性的參數(shù)值，而且需要若干個(gè)HTML標(biāo)簽的CSS來(lái)配合，從而實(shí)現(xiàn)傾斜背景的效果。所以我在CSS代碼部分用了比較多的注釋來(lái)描述這些屬性的效果和目的，大家在閱讀的時(shí)候可以將 CSS 結(jié)合著 HTML 一起來(lái)理解。或者可以直接拿我的這個(gè)實(shí)例作為一個(gè)模板來(lái)使用。

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>

    <div class="navbar-bg">
        <ul class="navbar">
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item sign">
                <a href="https://www.baidu.com">Sign</a>
            </li>
        </ul>
    </div>

    <div class="box-bg">
        <div class="box">
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
        </div>
    </div>

    <div class="content">
        <h1>This is content</h1>
    </div>

    <div class="footer">
        <div class="footer-bg">
            <ul class="list">
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
            </ul>
        </div>
    </div>

</body>

</html>

為了讓導(dǎo)航條和其他元素都能夠與頁(yè)面的兩邊留出距離，我在實(shí)際內(nèi)容標(biāo)簽的外圍又包裹了一層div，主要在這個(gè)包裹的div里設(shè)定左右內(nèi)間距，從而實(shí)現(xiàn)兩邊留白的效果。這些外圍包裹的 div 的 class 名稱一般都會(huì)有一個(gè)后綴 "-bg"。

在實(shí)際內(nèi)容的排列時(shí)，我采用了更加方便靈活的彈性布局，這樣會(huì)相對(duì)的減少HTML和CSS的代碼量。

另外，如果想要實(shí)現(xiàn)傾斜的背景顏色，那么這些帶有 bg 后綴的 div 就是需要傾斜的標(biāo)簽。傾斜這些 div 其實(shí)很簡(jiǎn)單，只需要設(shè)定一個(gè) transform: skew(0deg, -9deg) 這樣的CSS代碼即可，但是我們可以想象一下，原本是長(zhǎng)方形的 div 按照 Y 軸逆時(shí)針旋轉(zhuǎn)了一個(gè)弧度（-9deg）后，它會(huì)變成一個(gè)平行四邊形，這個(gè)平行四邊形是左邊低右邊高。這樣就會(huì)露出它后面的白色的 body 的部分。所以這種玩法麻煩的地方就是如何通過(guò)多個(gè) CSS 屬性的配合來(lái)遮住露出的白色的body部分。下面就來(lái)看一下這個(gè)HTML對(duì)應(yīng)的 CSS 代碼部分。

在大家閱讀 CSS 的代碼之前，我給出一個(gè)原理圖來(lái)解釋一下其中的原理：

當(dāng)外圍的 div 傾斜了之后，就需要把內(nèi)容部分的div的上部的內(nèi)間距增大，以此來(lái)遮住平行四邊形的左側(cè)露出的白色區(qū)域。這是頁(yè)面上部區(qū)域的原理。

那么頁(yè)面底部也同樣需要實(shí)現(xiàn)這樣傾斜背景顏色的設(shè)計(jì)，這樣才能將風(fēng)格一致，產(chǎn)生美感。原理還是這個(gè)原理圖所示的邏輯，不同的地方在于，底部最外圍的 div 不傾斜，而是需要兩個(gè)屬性，height 和 overflow-y，并且這個(gè) div 不能帶有背景顏色。它們的作用是當(dāng)它里面的內(nèi)容超出這個(gè) div 的區(qū)域時(shí)就不顯示，這樣就會(huì)讓上圖中藍(lán)色的平行西變形的左下角區(qū)域被紅色的框線裁剪掉，從而讓這個(gè)div 乖乖的呆在頁(yè)面的底部。而這個(gè) div 里面一層的 div 需要讓它傾斜，而且還帶有一個(gè)背景顏色。這樣組合出來(lái)的效果就是一個(gè)看似是左右兩邊是豎線，下部是橫線，只有上部是斜線的帶有背景顏色的四邊形，這個(gè)四邊形里面是實(shí)際的頁(yè)面內(nèi)容。

最終的樣子在這篇 CSS 代碼的最后展示出來(lái)了。

CSS

在線咨詢

上一篇：新番大放送，快來(lái)看看有沒(méi)有你的菜！
下一篇：vue項(xiàng)目引入字體文件過(guò)大和動(dòng)態(tài)加載文本，字體不生效

您的項(xiàng)目需求

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

整合營(yíng)銷服務(wù)商

利用jQuery實(shí)現(xiàn)導(dǎo)航欄在下拉一定高度后固定在頂部

HTML

CSS

您的項(xiàng)目需求