JQuery遮罩層是網頁中經常用到的功能。遮罩層可以用來防止用戶在進行某些操作時對網站進行誤操作。但是，當遮罩層出現時，如果頁面內容太長，用戶需要滾動屏幕才能看到所有內容。在這種情況下，我們需要讓遮罩層與滾動條一起工作。

為了實現這一目的，我們需要用jQuery來操作遮罩層和滾動條。首先，我們需要在頁面中添加一個遮罩層DIV：

<div id="mask"></div>

接下來，我們需要使用CSS樣式指定遮罩層的樣式：

#mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0.7;
display: none;
z-index: 999;
}

上述CSS樣式將遮罩層定位在頁面的左上角，并設置其寬度和高度為100％。同時，我們將背景顏色設置為黑色，并透明度設置為0.7。該遮罩層默認不可見。

現在，當需要顯示遮罩層時，我們可以使用以下jQuery代碼：

$("#mask").fadeIn();

上述代碼將使遮罩層出現，同時隱藏在它之下的內容。但是，當頁面內容太長時，我們希望用戶能夠在滾動屏幕時同時滾動遮罩層。我們可以使用以下jQuery代碼來實現這一點：

$("#mask").css("height", $(document).height());
$(window).scroll(function () {
$("#mask").css("top", $(window).scrollTop());
});

上述代碼將遮罩層的高度設置為整個頁面的高度，并將遮罩層的頂部位置設置為滾動條的位置。這樣，當用戶滾動頁面時，遮罩層將跟隨滾動條一起滾動。

綜上所述，當我們需要在頁面中添加遮罩層時，可以通過使用jQuery代碼來控制滾動條和遮罩層的位置和狀態，從而達到良好的用戶體驗效果。