JS 實現置頂輸入文本框

最新推荐文章于 2022-09-06 20:49:23 发布

homehome...

最新推荐文章于 2022-09-06 20:49:23 发布

阅读量178

点赞数

分类专栏：前端 JS 文章标签： javascript 前端

本文链接：https://blog.csdn.net/segclliwf/article/details/124270054

版权

JS 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

**HTML:**
<style>
 .fixedDiv {
        z-index: 100000;/*置頂*/
        background: #FFFFFF;       
        position: fixed;
        padding: 4px;
        top: 0;       
        opacity: 0.9;/*透明度*/
    }
 </style>
<div class="card">
    <div class="card-body">
                 <div id="topFixedDiv">
                    <div class="form-group">
                        <label class="control-label">置頂的行： <text class="redText">*</text></label>
                        <textarea id="addCommentInput" class="form-control" maxlength="1000" rows="10"></textarea>
                    </div>
                </div>
           <div class="row">row2</div>
           <div class="row">row....其它許多行...</div>
      </div>
 </div>
                 

**JS:**
$(function(){
 let fixContainerWidth = $("#actionSection").width();          
            window.onscroll = function () { 
            fixedTopDiv("topFixedDiv",fixContainerWidth);
         };       //注： onscroll 事件觸發太過頻繁帶來性能壓力，可使用 Underscore.js 中 _.throttle 和 _.debounce 来减少回调执行。   
});

function fixedTopDiv(divId,divWidth) {
            var topDiv= document.getElementById(divId);
            var offTop= topDiv.offsetTop;
            $(topDiv).css("width", divWidth);
            if (window.pageYOffset > offTop) {
                topDiv.classList.add("fixedDiv");
            } else {
                topDiv.classList.remove("fixedDiv");
            }
        }