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像素到达页面末尾时。

当我玩那个时，没有任何事情发生我怎么能这样做？

Answer 1

我修改了你的代码..

运行此代码段并阅读我放在那里的评论，以便更好地了解我的所作所为。它工作得很好但在某些情况下可能需要一些调整。

使用它向下滚动直到看到弹出

＆＃13;

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);
    }
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Javascript /窗口高度 - 什么？

1 个答案: