我在页面顶部有一个div,其中包含一些简单的联系信息和社交媒体链接,这些信息会在向下滚动时隐藏,并在您到达页面顶部时重新显示。我只想让这种过渡更顺利地进行。上下滑动会很好,但是我没有成功地使其工作。以下是我现在所拥有的:
(function($) {
"use strict";
function mainNavbar() {
if ($('#main_navbar').length) {
$('#main_navbar').affix({
offset: {
top: 10,
bottom: function() {
return (this.bottom = $('.footer').outerHeight(true))
}
}
});
}
}
mainNavbar();
})
.top_header_area {
background: #333333;
}
.top_header_area .top_nav li a {
font: 400 14px/50px "Roboto", sans-serif;
color: #fff;
padding: 0;
padding-left: 30px;
}
.top_header_area .top_nav li a i {
color: #cc0033;
font-size: 18px;
padding-right: 10px;
}
.top_header_area .top_nav li a:hover,
.top_header_area .top_nav li a:focus {
background-color: transparent;
color: #cc0033;
}
.top_header_area .top_nav li:first-child a {
padding: 0;
}
.top_header_area .social_nav {
margin: 0;
padding-top: 12px;
}
.top_header_area .social_nav li a {
font-size: 14px;
color: #fff;
padding: 0;
text-align: center;
height: 24px;
width: 24px;
border-radius: 50%;
margin-left: 10px;
}
.top_header_area .social_nav li a i {
line-height: 24px;
}
.top_header_area .social_nav li a:hover,
.top_header_area .social_nav li a:focus {
background: #cc0033;
color: #333333;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="top" class="top_header_area">
<div class="container">
<ul class="nav navbar-nav top_nav">
<li><a href="#"><i class="fa fa-phone"></i>317-328-8492</a></li>
<li><a href="#"><i class="fa fa-envelope-o"></i>info@atcinc.net</a></li>
</ul>
<ul class="nav navbar-nav navbar-right social_nav">
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
</ul>
</div>
</section>
<div class="main">
<p>Here i some sample text<br>
Scroll me<br></p>
</div>
答案 0 :(得分:1)
$(window).scroll(function(){
if($(window).scrollTop() > 20 ){
$('#top').addClass('slide');
}
else{
$('#top').removeClass('slide');
}
});
.top_header_area {
background: #333333;
}
.top_header_area .top_nav li a {
font: 400 14px/50px "Roboto", sans-serif;
color: #fff;
padding: 0;
padding-left: 30px;
}
.top_header_area .top_nav li a i {
color: #cc0033;
font-size: 18px;
padding-right: 10px;
}
.top_header_area .top_nav li a:hover,
.top_header_area .top_nav li a:focus {
background-color: transparent;
color: #cc0033;
}
.top_header_area .top_nav li:first-child a {
padding: 0;
}
.top_header_area .social_nav {
margin: 0;
padding-top: 12px;
}
.top_header_area .social_nav li a {
font-size: 14px;
color: #fff;
padding: 0;
text-align: center;
height: 24px;
width: 24px;
border-radius: 50%;
margin-left: 10px;
}
.top_header_area .social_nav li a i {
line-height: 24px;
}
.top_header_area .social_nav li a:hover,
.top_header_area .social_nav li a:focus {
background: #cc0033;
color: #333333;
}
p{
position:absolute;
top:20%;
left:50%;}
.main{
width:100%;
position:relative;
height:2000px;}
#top.slide{
transform :translateY(-100%);
opacity:0;
}
#top{
transition: all 2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="top" class="top_header_area">
<div class="container">
<ul class="nav navbar-nav top_nav">
<li><a href="#"><i class="fa fa-phone"></i>317-328-8492</a></li>
<li><a href="#"><i class="fa fa-envelope-o"></i>info@atcinc.net</a></li>
</ul>
<ul class="nav navbar-nav navbar-right social_nav">
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
</ul>
</div>
</section>
<div class="main">
<p>scroll me</p>
</div>