# 判斷 Div 在 ScrollBar 移動後，是否還在可見的範圍內 ? 若不在範圍內顯示浮動視窗
###### tags: `實作 Style`

## 20231116更新
### HTML

<div class="mb-3" id="divBtnGroup">
    <button type="button" id="btnExp" class="btn btn-primary ms-3" disabled><span class="@CommonConfig.Icon.Mdi.ExpandAll"></span> 展開細項</button>
    <button type="button" id="btnAdd" class="btn btn-primary ms-3" disabled><i class="@CommonConfig.Icon.FontAwesome.AddItem"></i> 新增</button>
    <button type="button" id="btnDel" class="btn btn-primary ms-3" disabled><i class="@CommonConfig.Icon.FontAwesome.DeleteItem"></i> 刪除</button>
    <button type="button" id="btnCopy" class="btn btn-primary ms-3" disabled><i class="@CommonConfig.Icon.FontAwesome.Copy"></i> 複製</button>
    <button type="button" id="btnMod" class="btn btn-primary ms-3" disabled><i class="@CommonConfig.Icon.FontAwesome.EditItem"></i> 修改</button>
    <button type="button" id="btnSave" class="btn btn-primary ms-3"><i class="@CommonConfig.Icon.FontAwesome.Save"></i> 儲存</button>
    <button type="button" id="btnPrint" class="btn btn-primary ms-3"><span class="@CommonConfig.Icon.Mdi.PreView"></span> 預覽</button>
    <button type="button" id="btnClose" class="btn btn-primary ms-3"><i class="@CommonConfig.Icon.FontAwesome.Cancel"></i> 關閉</button>
</div>

@* 基準點元素，必須給內容，空的話好像不會存在網頁上 ? 不太確定 *@
<span id="forFloatDatumPoint" class="text-center">&nbsp;</span>

@* 這個是 bootstrap-table 套件 *@
<table class="table table-bordered no-margin" id="tblItem"
        data-locale="zh-TW"
        data-loading-template="@CommonConfig.Icon.BootstarpTableLoading"
        data-single-select="true"
        data-unique-id="ItemId"
        data-click-to-select="true">
    <thead>
        <tr>
            <th data-checkbox="true"></th>
            <th data-field="" data-formatter="idFormatter" data-align="center" data-width="50">編號</th>
            <th data-field="Item">項目</th>
            <th data-field="ItemDesc">項目描述</th>
            <th data-field="SpecMax" data-formatter="specFormatter">規格</th>
            <th data-field="EqNames">適用機台</th>
            <th data-field="Remark">註解</th>
            <th data-field="IsExpand" data-formatter="isExpandFormatter" data-align="center" data-width="80">是否展開</th>
        </tr>
    </thead>
</table>

### JS

$(window).scroll(function () {
    let eleForFloatDatumPoint = $('#forFloatDatumPoint'); // 基準點
    let scroll = $(window).scrollTop(); // scroll 位置
    let elementHeight = eleForFloatDatumPoint.outerHeight(); // 基準點元素高度
    let eleForFloatDatumPointOffset = eleForFloatDatumPoint.offset().top; // 基準點元素最上方的位置

    if (scroll > eleForFloatDatumPointOffset + elementHeight) {
        $('#divBtnGroup').css({
            'position': 'fixed',
            'top': '110px', // 設置固定位置的頂部邊距 => 也可用百分比
            'z-index': 101
        });
    }
    else {
        $('#divBtnGroup').css({
            'position': 'static', // 恢復原來的位置
            'z-index': 10
        });
    }
});

----------------------------------------------

## 結果

## 實作概念
1. 準備一個浮動的 div 區塊
2. JS 判斷那個活動資訊是不是已經沒有在現在的畫面上，沒有的話 把浮動的 div 區塊 show 出來

## 解決過程
一開始我想讓原本的 div 區塊浮動起來，但是不太懂怎麼弄，就換個方法試試看

於是我開始從網路找怎麼判斷原本的 div 區塊是否正在當前可見畫面上，因為沒概念，找到之後就開始看 Function 是怎麼做的，理解他並自己模擬是否可行
[參考-滚动后如何检查元素是否可见？](https://blog.csdn.net/asdfgh0077/article/details/103504864)

模擬後發現不太對，改成對的之後並加上註解，期望之後不要忘記怎麼用XD

## Script

<script>
    $(function () {
        SetFloatEventInfoVisiable();

        $(window).scroll(function () {
            SetFloatEventInfoVisiable();
        });
    })

    // 設定浮動活動資訊的可見度
    function SetFloatEventInfoVisiable() {
        //console.log("isInView ? " + isScrolledIntoView($('.EventInfo')));

        if (isScrolledIntoView($('.EventInfo'))) {
            $(".floatEventInfo").css("display", "none");
        }
        else {
            $(".floatEventInfo").css("display", "block");
        }
    }

    // 判斷元素是否在畫面中
    function isScrolledIntoView(elem) {
        // 現在的頁面 ( 顯示body(content)的部分 ) 的最上方 ( 最上方 + header navbar 的高 )
        var docViewTop = $(window).scrollTop() + $("#main_header > .navbar").height();
        // 現在的頁面 ( 顯示body(content)的部分 ) 的最下方 ( 最上方 + 一個畫面能顯示多少 - Footer 的高 )
        var docViewBottom = docViewTop + $(window).height() - $("#main_footer").height();
        // 元素頂部的位置
        var elemTop = $(elem).offset().top;
        // 元素底部的位置
        var elemBottom = elemTop + $(elem).height();
        // 若 elemTop 或是 eleBottom 在 docTop ~ dovBottom 的範圍中，就算存在於畫面中
        return (docViewTop <= elemTop && elemTop <= docViewBottom) || (docViewTop <= elemBottom && elemBottom <= docViewBottom)
    }
</script>

## Html
準備一個 Float 用的區塊，先隱藏起來

<!-- 浮動活動資訊 -->
<div class="bg-white p-2 floatEventInfo" style="display:none">
    一些資訊 ....
</div>

<!-- 非浮動活動資訊 ( 原本就在畫面上的 ) -->
<div class="bg-white p-2 EventInfo">
    一些資訊 ....
</div>

## Style

為 Float 區塊加上陰影

<style>
    .floatEventInfo {
        // 設為浮動在最上方 ( navbar 選單下 )
        position: fixed;
        top: 56px;
        // 顯示在最上層 ( 但不能比 navbar 還高 )
        z-index: 50;
        // 寬度自定 ( 此為和原本區塊盡量一致 )
        width: calc(100vw - 30px);
        //為 Float 區塊加上陰影
        box-shadow: rgb(204, 204, 204) 3px 3px 6px 3px; 
    }
</style>