Javascript /窗口高度 - 有什麼？

Question

我有以下代碼：

24 <script type="text/javascript"> 
25 
26 function ToggleBlock($bShow){ 
27   if($bShow) 
28     $('.nkRelBlock').stop().css({ 
29       "transform": "translate3d(-20px,0,0)" 
30     }); 
31   else 
32     $('.nkRelBlock').stop().css({ 
33       "transform": "translate3d(105%,0,0)" 
34     }); 
35 } 
36 
37 $(document).ready(function(){ 
38   var halfBody = $(window).height()/9; // controls at which height the related block will display. body height/8 
39   
40   if($('body').height() > ($(window).height() + halfBody)) 
41     $(window).scroll(function(e) { 
42       
43         if($(window).scrollTop() > halfBody) 
44           ToggleBlock(true); 
45         else 
46           ToggleBlock(false); 
47     }); 
48   else 
49     ToggleBlock(true); 
50 }); 
51 
52 </script> 

，使一個網站的項目彈出，一旦我們向下滾動。

我需要在滾動時稍後顯示它，例如當我們處於100 px時才能到達頁面的末尾。

當我玩那個9沒有任何反應 我該怎麼做？

Answer 1

我定你的代碼有點..

運行該代碼段，然後讀我放在那裏的意見，以便更好地理解我所做的。 它工作得很好，但在某些情況下可能需要調整。

要使用它只需向下滾動，直至看到彈出

function ToggleBlock($bShow) { 
 
    // You can just use Show and Hide for animations 
 
    if ($bShow) { 
 
    $('.nkRelBlock').show(1000); 
 
    } else { 
 
    $('.nkRelBlock').hide(400); 
 
    } 
 
} 
 

 
$(document).ready(function() { 
 
    // Set Half Body (divide by 2) 
 
    var halfBody = $('body').height()/2; 
 
    // Find the maximum possible scroll from top 
 
    var maxScrollTop = $('body')[0].scrollHeight - window.innerHeight; 
 
    
 
    // Set on Scroll event 
 
    $(window).scroll(function(e) { 
 
    // Set common scroll factor which is the half body 
 
    var scrollFactor = halfBody; 
 

 
    if (halfBody - maxScrollTop > 0) { 
 
     // In cases where the scroll is smaller than half the body e.g. when window and body height are rather small.. 
 
     scrollFactor = halfBody -maxScrollTop; 
 
    } 
 
    if ($(window).scrollTop() > scrollFactor) { 
 
     ToggleBlock(true); 
 
    } else { 
 
     ToggleBlock(false); 
 
    } 
 
    }); 
 
});

body { 
 
\t height: 1000px; 
 
} 
 
.nkRelBlock { 
 
\t margin-top: 0 !important; 
 
\t position: fixed; 
 
\t width:5vh; 
 
\t height: 5vh; 
 
\t background-color: red; 
 
\t color: white; 
 
\t font-weight: bold; 
 
\t padding: 30px; 
 
\t border-radius: 10px; 
 
    /* Start hidden initially */ 
 
\t display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="nkRelBlock">Hi!</div>