Can someone help me with a CSS/jQuery fixed header with dynamic elements?
Question
What I want to do is have a fixed header that has the nice "shrinking effect" when you scroll down and resizes the content within - that's pretty simple and I have followed tutorials to help me do that.
Now what I want to do is to have elements APPEAR when I scroll down; for example:
When the user scrolls down, the menu hides the elements in the top left (links) and then makes a logo appear. A search bar also appears in the middle. I can do the CSS for these and set 'display:none', but I would like for the scroll down to display them, and then set the other elements to hidden.
Keep in mind that when I scroll back to the top, I would need for the original elements to re-appear and then hide the search and logo.
This is the code I have for getting the fixed header to work (it's ugly but it works in a basic form):
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>
1 answers
solution1
1 ACCPTED 2015-08-10 17:41:46
Here is a very quick version of what you're looking for. Still need to style the right "links". Just a matter of toggling what is and isn't seen:
( 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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.