我想要做的是有一个固定的标题，当您向下滚动并调整其中内容的大小时，它具有很好的“缩小效果”——这很简单，我已经按照教程来帮助我做到这一点。
现在我要做的是让元素在我向下滚动时出现；例如:
当用户向下滚动时，菜单会隐藏左上角的元素(链接)，然后显示一个 Logo 。搜索栏也出现在中间。我可以为这些做 CSS 并设置“display:none”，但我希望向下滚动以显示它们，然后将其他元素设置为隐藏。
请记住，当我滚动回顶部时，我需要重新显示原始元素，然后隐藏搜索和 Logo 。
这是让固定 header 工作的代码(它很丑，但它以基本形式工作):
header {
text-align: center;
font-size: 1.4em;
line-height: 50px;
height: 70px;
background: #323232;
color: #fff;
font-family:'Open Sans', sans-serif;
/* set animation */
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
header.fixed {
position: fixed;
font-size: 14px;
line-height: 48px;
height: 40px;
width: 100%;
background: #323232;
text-align: left;
padding-left: 20px;
}
header.logo {
width: 10px;
height: 10px;
background-color: #red;
position: fixed;
float: left;
}
.content {
height: 2000px;
width: 100%;
background-color: #fff;
padding: 25px;
}
<body>
<!-- our markup -->
<header>
<h1>Header</h1>
</header>
<!-- an image for demonstration purposes -->
<div class="content">Site Content</div>
<!-- import jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- write script to toggle class on scroll -->
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 1) {
$('header').addClass("fixed");
} else {
$('header').removeClass("fixed");
}
});
</script>
</body>
最佳答案
这是您正在寻找的内容的快速版本。仍然需要设计正确的“链接”。只是切换可见和不可见的问题:
( Demo )
$(window).scroll(function () {
if ($(this).scrollTop() > 1) {
$('header').addClass("fixed");
$('.mLeft').fadeOut();
$('.logo, .search').fadeIn();
} else {
$('header').removeClass("fixed");
$('.mLeft').fadeIn();
$('.logo, .search').hide();
}
});
header {
text-align: center;
font-size: 1.4em;
line-height: 50px;
height: 70px;
background: #323232;
color: #fff;
font-family:'Open Sans', sans-serif;
/* set animation */
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
header.fixed {
position: fixed;
font-size: 14px;
line-height: 48px;
height: 40px;
width: 100%;
background: #323232;
text-align: left;
}
.search {
display: none;
position: fixed;
left: 190px;
top: 0;
}
DIV.logo {
display: none;
padding: 5px;
background-color: red;
position: fixed;
float: left;
left: 20px;
top: 0;
}
.mLeft {
float: left;
}
.mRight {
float: right;
}
.content {
height: 2000px;
width: 100%;
background-color: #fff;
padding: 25px;
}
关于javascript - 有人可以帮助我使用带有动态元素的 CSS/jQuery 固定 header 吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31925421/