i want to change header position static to fixed with smooth slide down effect

Question

>     when i scroll then header will animate with slide down effect and position changed to
>     fixed else with slide up effect and change position to static back

First problem is after slide up div goes hide i want to show div where it is after slide up
Second problem is slide down not working properly

js Fiddle

P. Frank · Accepted Answer · 2015-11-17 08:52:31Z

up vote 1 down vote accepted

Please try

Show code snippet

UPDATE

$(window).scroll(function() {

    var scroll = $(window).scrollTop();

    if (scroll >= 380) {
       	if($('.header').css("position") != "fixed")
   			$('.header').css({position:"fixed",top:"-70px"}).animate({top:"0",},100,"linear")
    }else if (scroll <= 180) {
        if($('.header').css("position") != "static")
   			$('.header').animate({top:"-70px",},100,"linear",function(){
                $('.header').css({position:"static"})
            })
    }
});

.main{height:1300px;}
.header{width:1000px; height:70px; background-color:red; margin:auto;}

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

Full page

edited Nov 17 '15 at 8:52

answered Nov 16 '15 at 13:23

P. Frank

3,139 3 7 33

i want header slide down after some scroll then slide up bt no changes in my static header – rahul Nov 17 '15 at 7:22

if i have understand you want: after scroll down the header slideUp and after scroll up the header scrollDown. is correct? – P. Frank Nov 17 '15 at 7:53

for example i have a static header i don't won't to make any changes on this, bt when i scroll >=300 header slide down , <=300 slide up ,bt no changes in my static header,and i don't won't to make clone of my header – rahul Nov 17 '15 at 7:56

Ok, you say `static' but you want the header is fixed on top. just? – P. Frank Nov 17 '15 at 8:03

when page load static header ,when i scroll >=180 header slide down position fixed, one more thing below<=180 header slide up ,bt no changes in static header, hope u understand – rahul Nov 17 '15 at 8:10

u can see this effect in snapdeal homepage – rahul Nov 17 '15 at 8:19

Ok. on snapdeal homepage they use 2 block header. One is static header and the other is for dynamic header. Ok please try: jsfiddle.net/j2p1r573 – P. Frank Nov 17 '15 at 8:36

i know they use 2 block header but i don't won't to use two block header, the reason is ajax support only one header ,if i call that block two times ajax will updated only first one, even if i make clone my header then ajax will support only first one not clone, finally the result is ajax support only one header at the time, thats why i won't this effect on single header – rahul Nov 17 '15 at 8:38

you can update the two blocks. whats you ajax code? – P. Frank Nov 17 '15 at 8:40

i m using multiple ajax extension in magento they only support one header at a time – rahul Nov 17 '15 at 8:41

ok. try this is exactly what you want: jsfiddle.net/ucpos42a – P. Frank Nov 17 '15 at 8:48

see my update!! – P. Frank Nov 17 '15 at 8:53

thank bro u save my day that is exactly what i want, thanks alot – rahul Nov 17 '15 at 8:54

with pleasure! :-) – P. Frank Nov 17 '15 at 9:06

add a comment

制作顶部导航平滑收起和展开

i want to change header position static to fixed with smooth slide down effect

1 Answer

猜你喜欢