Question

我尝试像这个网站制作标题动画：https://www.templatemonster.com/demo/57969.html 这是我的代码：

HTML

<div id="header-part" class="container-fluid fixed-nav">  </div>

CSS

#header-part.container-fluid { 
background-color: #1f2324;
padding: 32px 0 22px 0;
display: flex;
height: 100px;
 width: 100%;
padding: 0;
}

#header-part.fixed-nav {
position: fixed;
top: -100px;
border-bottom: 0px solid #5f6a6d;
z-index: 4;
}

JS

$(window).scroll( function(){
 var top_of_window = $(window).scrollTop();
 if( top_of_window > 100 ){
  $(".fixed-nav").animate({top:'0'}, 800);
  }
});

我的想法是使用top:-100px隐藏它并在向下滚动到100px时显示它。它运行顺畅，但是当我向上滚动100px时添加else {$(".fixed-nav").animate({top:'-100px'}, 800);}来隐藏它时，它会默认隐藏我的标题，并且可能忽略if来运行else。

尝试一下，然后删除文件js中else的注释以查看问题 https://github.com/dothuan96/Animation-HTML-basic/tree/master/cinema%20header

Answer 1

试试这个

if( top_of_window > 100 ){
  $(".fixed-nav").animate({height: 'toggle'}, 800);
  }
else{ 
$(".fixed-nav").animate({
            height: 'toggle', 
        800
        });
}

向下滚动以显示标题并在向上滚动时隐藏

1 个答案: