Important nautical show with jQuery slideDown Slow

JS file code

 $(document).scroll(function (){
        var menuheight= $('header').height();
        var y = $(this).scrollTop();

      if (y>(menuheight))
       {

              $('.menu_nav_features').addClass('sticky');
       }

      else{
              $('.menu_nav_features').removeClass('sticky');
       }

 });

      

.Css code class

to add to scroll down for specific file height

 .sticky{
   position: fixed;
   top: 0;
  }

      

This is my .lessNavigation Bar

code . (for information)

   .menu_nav_features{
       width: 100%;
       height: 46px !important;
       border-bottom: 1px solid #e6e6e6;
       border-top: 1px solid #e6e6e6;

    .menu-features{
        margin-top: 0px;
        width: 1200px !important;
        list-style:none;
        margin-left: -35px;
        li{
            display: inline;
            .transition;
            a{  
                background: #f4f4f4;
                margin-right:-3px;
                display: inline-block;
                text-decoration: none;
                color:#444444;
                padding:0px 30px;
                line-height: 44px;
                .transition;
            }
            a:active, a:hover{
                color: #000;
                background: #fdfdfd;
            }
        }
        li:nth-child(2):hover .bf{
            .displayall;
            .transition;
        }
        .bf{
            display: none;
            position: absolute;
            margin-left: 134px;
            padding-top: 7px;
            // top: 50px;
            .bf_btns{

                a{
                    display: block;
                    width: 238px !important;
                }
                a:last-child{
                    margin-top: 0px;
                }
            }
        }
    }
 }

      

Challenge: If the height of the scrollbar is greater than my height Header

, then my navigation bar will fix the cause Sticky

class

. This will display immediately and I want to show it slowly or something like slideDown

JQuery.I add tranistion

to Sticky

Class but nothing happened.

+3


source to share


1 answer


You can just fix this problem with css



@keyframes scroll-down {
  from {transform: translate(0,100%)}
  to {transfrom: translate(0,0)}
}
.sticky {
  position: fixed;
  top:0;
  animation-name: scroll-down;
  animation-duration: 0.4s;
}

      

0


source







All Articles