CODEWITHSUNDEEP
jquerycss
vlk
vlk

Reputation: 1454

Issues with jquery slide up - slidedown - The div doesn't appear

I've some problem with jquery SlideDown. I think the problem is in the display:none of css but I need to start with the div hidden.

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 LINK

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

Thank you very much

Upvotes: 1

Views: 1022

Answers (1)

Jonathan Michalik
Jonathan Michalik

Reputation: 1532

Instead of keeping display:none in the default styling of the element, you can remove that property from your CSS and call .hide() on it on $(document).ready() like this:

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

});

The .hide() function sets display:none on the element, so it's effectively doing what your style is doing, just not making it a permanent property value.

Upvotes: 1

Related Questions