我想将标题位置静态更改为固定，并具有平滑向下滑动效果

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

1. 第一个问题是在向上滑动div 后隐藏我想显示div 的位置在向上滑动后

2. 第二个问题是下滑无法正常工作

js 小提琴

Answer 1

请尝试

$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll <= 380) {
       $('.header').slideDown(function(){
          $('.header').css('position','fixed');
       });
    }else{
        $('.header').slideUp();
    }
});

.main{height:1300px;}
.header{width:100%; 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>    

更新

$(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>