Question

希望有人可以在这里提供一些指导。我有一些JS告诉div在用户滚过设定的Y点后滑入视图。

但是，在页面加载时，div仍然可见，直到您开始滚动。然后它会消失，然后在其意图时滑入。

jQuery(document).ready(function ($) {
  $(document).scroll(function() {
    var y = $(this).scrollTop();
    if (y > 800) {
      $('.mobileEnquiry').slideUp();
    } else {
      $('.mobileEnquiry').slideDown();
    }
  })
})

body {
  height: 1200px
}
.mobileEnquiry {
  display: flex;
  position: fixed;
  z-index: 999999;
  bottom: 0;
  width: 100%;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 11px;
  background-color: red;
  height: 100px
}

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

任何人都知道为什么会这样吗？我尝试过几件事。首先，将它从我的JS的'on page load'部分移出，但是什么也没做。然后我环顾四周，尝试了不同的方法，但都没有。

Answer 1

jQuery slideUp()方法使用滑动动作隐藏匹配的元素。和slideDown()方法，显示匹配的元素和滑动。所以：

＆＃13;

$( document ).ready( function () {
  $( document ).scroll( function() {
    var y = $( this ).scrollTop();
    ( y > 800 ) ? $( '.mobileEnquiry' ).slideDown() : $( '.mobileEnquiry' ).slideUp();
  } )
} )

＆＃13;

body {
  height: 1200px
}
.mobileEnquiry {
  display: none;
  position: fixed;
  z-index: 999999;
  bottom: 0;
  width: 100%;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 11px;
  background-color: red;
  height: 100px
}

＆＃13;

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

＆＃13;

在页面加载

1 个答案: