當div已滾動到視圖中時提醒用戶

我試圖執行一個函數/警告用戶，當他們向下滾動到特定的div，然後乳清他們已滾動到頁面的底部。我可以在用戶滾動到底部並返回頂部時發出提醒，但不知道如何指定用戶何時滾動到底部（到中間部分）。我見到目前爲止如下：當div已滾動到視圖中時提醒用戶

HTML

<div class="container top">TOP</div> 
<div class="container middle">Middle</div> 
<div class="container bottom">Bottom</div>

jQuery的

$(function() { 
    var $win = $(window); 

    $win.scroll(function() { 
     if ($win.scrollTop() == 0) { 
      alert("USER SCROLLED TO TOP"); 
     } else if ($win.height() + $win.scrollTop() == $(document).height()) { 
      alert("USER SCROLLED TO BOTTOM"); 
     } 
    }); 
});

的jsfiddle：問題的LINK

來源

2015-09-25 Matt

我通常使用的航點。如果你打算使用庫，js for this http://imakewebthings.com/waypoints/ –

我把它作爲備份，但不應該爲這一點功能加載整個庫。 – Matt

我使用該插件創建了一個小提琴：http://jsfiddle.net/mattography/xv4z4krm/，但是如何防止當我向後滾動時觸發警報？ – Matt

的部分是，$(document).height()值嘛y永遠不會通過滾動獲得，因爲頁面內的元素可能會影響實際的文檔高度與用戶能夠滾動的內容。

你可以找到底部容器的位置，像這樣

$('.bottom').position();

但這隻會給你其父項內的元素的位置。然後，您需要計算相對於每個父母和祖父母的偏移量（如適用）。

同樣，你可以看着getBoundingClientRect function：

$('.bottom')[0].getBoundingClientRect();

看看圖書館Waypoints看到一個「現成」的版本。

更新1：爲了您的jsfiddle樣品，請記住，航點需要有一個元素命中窗口頂部的觸發（默認情況下爲 - 您可以調整與offset這種行爲）。

See my JSFiddle here where我已經使每個div更大，以允許窗口滾動傳遞，基於您的JSFiddle。

來源

2015-09-25 19:01:36 bonesbrigade

我已經設置了一個演示，但是當中間元素進入視圖時不會觸發：http://jsfiddle.net/mattography/ea7stw0f/3/ – Matt

我已經使用mod更新了我的答案的jsfiddle – bonesbrigade

https://jsfiddle.net/xsLx9ojs/1/

我添加的ID將HTML的div：

<div id="top" class="container top">TOP</div> 
<div id="bottom" class="container bottom">BOTTOM</div>

然後我添加一個條件，當底部格出現在用戶的屏幕上檢測到時，他滾動：

$(function() { 

     var $win = $(window); 

     $win.scroll(function() { 
      if ($win.scrollTop() == 0) { 
       console.log("USER SCROLLED TO TOP"); 
      } else if ($win.height() + $win.scrollTop() >= $('#top').height() - 50 
        && $win.height() + $win.scrollTop() <= $('#top').height() + 50) { 
       console.log("TRANSITION BETWEEN THE TWO DIVS"); 
      } else if ($win.height() + $win.scrollTop() == $(document).height()) { 
       console.log("USER SCROLLED TO BOTTOM"); 
      } 
     }); 

    });

滾動檢測並非如此精確，原因是鼠標輪的小「跳躍」。所以我加了一個100px的容差。如果我是你，我會改善這種東西，可檢測如果底部DIV警報已經被賦予或不那麼函數沒有在這樣每次滾動觸發一個布爾值：

[...] 
    if ($win.scrollTop() == 0) { 
     //top reached 
    } else if ($win.height() + $win.scrollTop() >= $('#top').height()) { 
     //alert! bottom div appeared while scrolling bottom! 
     //deal with this with a boolean 
    } else if ($win.scrollTop() <= $('#top').height()) { 
     //alert! bottom div disappeared while scrolling top! 
     //deal with this with a boolean 
    } else if ($win.height() + $win.scrollTop() == $(document).height()) { 
     //bottom reached 
    } 
    [...]

來源

2015-09-25 19:23:11 PiTiNiNjA

當div已滾動到視圖中時提醒用戶

回答

相關問題