很多時候我們會受到一些需求：

創(chuàng)新互聯(lián)公司是少有的成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、營銷型企業(yè)網(wǎng)站、微信小程序、手機APP,開發(fā)、制作、設(shè)計、賣友情鏈接、推廣優(yōu)化一站式服務(wù)網(wǎng)絡(luò)公司,自2013年創(chuàng)立以來,堅持透明化,價格低,無套路經(jīng)營理念。讓網(wǎng)頁驚喜每一位訪客多年來深受用戶好評

1、div一直置頂

2、div一直置底

3、超過一定的位置之后div置頂

4、超過一定位置之后div置底

那么下面針對上面的幾個問題寫幾個案例：

一、div一直在屏幕的上方，這個倒是容易咱們直接使用position:fixed;然后設(shè)置他的top值和left就可以了，別忘了設(shè)置寬度哦

<div class="top">
<div class="topf">跟單</div>
</div>
<style>
.top,.topf{ height:100px; width:100%;}
.topf{ position:fixed; top:0; left:0; background:#999; text-align:center; font-size:20px; color:#fff;}
</style>
點擊這里查看demo -》

二、這個跟上面的例子是一樣的，我不不多說了

<div class="bottom">
<div class="bottomf">跟單</div>
</div>
<style>
.bottom,.bottomf{ height:100px; width:100%;}
.bottomf{ position:fixed; bottom:0; left:0; z-index:12; background:#999; text-align:center; font-size:20px; color:#fff;}
</style>

三、這個就比較有意思了，有些時候咱們的導(dǎo)航在banner的下方

如下圖：
這時候咱們的需求就出來了，當(dāng)咱們的滾動條走到banner圖的底部的時候需要把nav的部分懸掛（position:fixed; top:0）；

這時候咱們就得計算了，先獲取nav到document頂部的距離，然后在獲取滾動條的長度，相減就能得到window的頂部的距離，當(dāng)兩者的相減<=0的時候懸掛。

html代碼如下

<div class="center">
<div class="centerf">跟單www.gendan5.com</div>
</div>

CSS代碼如下：

<style>
.center{ position:relative; z-index:12;}
.center,.centerf{ height:100px; width:100%;}
.centerf{ background:#666; text-align:center; font-size:20px; color:#fff;}
.on{ position:fixed; top:0; left:0; z-index:12;}
.onm{ position:fixed; bottom:0; left:0; z-index:12;}
</style>

JS代碼如下:

<script type="text/javascript">
$(function () {
function divtop(){
var boxTop = $('.center').offset().top;
var scrTop = $('body,html').scrollTop();
//頭部定位
if ((boxTop - scrTop) < 0){
if ($('.centerf').hasClass('on')){

}else{
                $('.centerf').addClass('on')
            }
        }else{
            if ($('.centerf').hasClass('on')){
                $('.centerf').removeClass('on')
            }else{

            }
        };
    };
    divtop();
    $(window).scroll(function () {
        divtop();
    });
    $(window).resize(function(){
        divtop();
    });
});

</script>

四、還有超過一定位置之后div置底
Html代碼：

<div class="center">
<div class="centerf">跟單www.gendan5.com</div>
</div>

CSS代碼：

<style>
.center{ position:relative; z-index:12;}
.center,.centerf{ height:100px; width:100%;}
.centerf{ background:#666; text-align:center; font-size:20px; color:#fff;}
.onm{ position:fixed; bottom:0; left:0; z-index:12;}
</style>

JS代碼：

<script type="text/javascript">
$(function () {
function divbottm(){
var boxTop = $('.center').offset().top;
var scrTop = $('body,html').scrollTop();
var winHei = $(window).height();
//頭部定位
if((boxTop - scrTop - winHei + 100) < 0){
if ($('.centerf').hasClass('onm')){

}else{
                $('.centerf').addClass('onm')
            }
        }else{
            if ($('.centerf').hasClass('onm')){
                $('.centerf').removeClass('onm')
            }else{

            }
        }
    };
    divbottm();
    $(window).scroll(function () {
        divbottm();
    });
    $(window).resize(function(){
        divbottm();
    })
});

</script>
看到代碼很多人都會有一個疑問，為什么scroll和resize時間中再執(zhí)行一遍？這是因為有些人在瀏覽網(wǎng)頁的時候會改變?yōu)g覽器的大小的緣故，當(dāng)瀏覽器的大小有變化的時候咱們帶再次計算數(shù)值，然后進行調(diào)整，好了，完畢

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章題目：div固定顯示的幾種方法-創(chuàng)新互聯(lián)
本文路徑：http://redsoil1982.com.cn/article30/idjpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、網(wǎng)站策劃、定制開發(fā)、營銷型網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)