[Jquery/Javascript] 捲動後超出範圍後區塊鎖定位置

2016-11-29

在瀏覽網站時廣告區塊或是重要的資訊區塊隨著頁面捲動時便會超出範圍(不可視)無法看到，所以如果捲動後超出範圍便將該區塊鎖定位置(上方、左方、右方、下方皆可或是指定的固定位置)，當滾軸捲動回去後便會將區塊還原至預設的位置，在這邊用簡單的javascript+css呈現此效果。

php with html代碼

<?php
    for($i = 1 ; $i <= 5 ; $i++){
?>
    <div class="line">
    <?="第".$i."行"?>
    </div>
<?php
    }
?>
    <div class="nav">
    捲動後固定行或區塊
    </div>
<?php
    for($i = 6 ; $i <= 80 ; $i++){
?>
    <div class="line">
    <?="第".$i."行"?>
    </div>
<?php
    }
?>

這裡首先是擺上幾行元件(範例擺上5行)將版面往下推

接下來擺上捲動後超出範圍要固定的區塊<div class="nav">

在將版面撐的夠長讓版面可以捲動的下面點(範例6-80行)

css代碼

.nav {
    width: 100%;
    text-align: center;
    height: 40px;
    line-height: 40px;
}
.line {
    margin: 8px 0px;
}
.nav.fix {
    position: fixed;
    top: 0px;
    background: #888;
    color: #FFF;
}

這邊在配置固定行(.nav)、與每行(.line)的基本樣式，和固定時會呈現的樣式(.nav.fix)

javascript代碼

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var chincode_body = $("body");
    var def_nav = $(".nav").offset().top;
    var nav = $(".nav");
    var scroll = false;
    $(document).scroll(function(){
        if(chincode_body.scrollTop()<def_nav){
            if(scroll){
                nav.removeClass("fix");
                scroll = false;
            }
        }else if(chincode_body.scrollTop()>=def_nav){
            if(!scroll){
                nav.addClass("fix");
                scroll = true;
            }
        }
    });
});
</script>

chincode_body = $("body"); //找到可以將版面整個包覆的屬性即可

def_nav = $(".nav").offset().top; //固定區塊的起始位置，(單位:靠上幾px)

nav = $(".nav"); //固定區塊的object

滾動時便會去判斷現在的位置chincode_body.scrollTop()是否已經超出固定區塊的起始位置(加上fix class)，或是小於固定區塊的起始位置(移除fix class)，這樣便可以達成固定區塊或是解除固定的效果。

JQuery 實作成果

Javascript 實作成果