jquery - jquery 的问题向上滑动 - 向下滑动 - div 没有出现

Question

我在使用 jquery SlideDown 时遇到了一些问题。我认为问题出在 display:none of css 但我需要从隐藏的 div 开始。

HTML

    <div id="miao">CIAO</div>

JQUERY

   var screenok = $(window).height();
     $(document).scroll(function() {
     if ($(this).scrollTop() < screenok/3) {
            $("#miao").slideUp(200);
        } else {
            $("#miao").slideDown(200);
        }

    });

CSS

          #miao{ height: 100px; 
          width: 100%; 
          position: fixed; 
          top: 0px;  
          left:0px; 
          z-index:20; 
          background:white; margin:auto; display:none;} 

JSFIDDLE 链接

https://jsfiddle.net/vtxLqjkw/1/

非常感谢

Answer 1

您可以从 CSS 中删除该属性并在 上对其调用 .hide()，而不是将 display:none 保留在元素的默认样式中>$(document).ready() 像这样:

$(document).ready(function() {
  var screenok = $(window).height();

  // hide the element initially
  $("#miao").hide();
  $(document).scroll(function() {
    if ($(this).scrollTop() < screenok / 3) {
      $("#miao").slideUp(200);
    } else {
      $("#miao").slideDown(200);
    }
  });

});

.hide() 函数在元素上设置了 display:none，所以它实际上在做您的样式正在做的事情，只是没有使它成为永久属性值。