I have a menu with this CSS properties:
#header {
width: 100%;
position: fixed;
z-index: 9000;
overflow: auto;
}
So based on the CSS properties above, this element (#header
) will obviously remain on top regardless of the scrolling. What I'm trying to achieve is on scroll up and scroll down, a bottom box shadow should be added into that element (#header
) and should be removed once it reaches the default location of that element (#header
) which is obviously the top-most place of the page.
I'm open to any suggestion and recommendation.
Use the box-shadow Property to Set the Bottom Box Shadow in CSS. We can use the box-shadow property to set the shadow only at the bottom of the box. The box-shadow property sets the shadow of the selected element.
When creating a box-shadow on one side only, we have to focus on the last value, the spread radius. The spread radius decreases the overall size of the box-shadow both horizontally and vertically.
In CSS, shadows on the boxes of elements are created using the box-shadow property (if you want to add a shadow to the text itself, you need text-shadow ). The box-shadow property takes a number of values: The offset on the x-axis. The offset on the y-axis.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 0) {
$("#header").addClass("active");
}
else {
$("#header").removeClass("active");
}
});
body {
height: 2000px;
margin: 0;
}
body > #header{position:fixed;}
#header {
width: 100%;
position: fixed;
z-index:9000;
overflow: auto;
background: #e6e6e6;
text-align: center;
padding: 10px 0;
transition: all 0.5s linear;
}
#header.active {
box-shadow: 0 0 10px rgba(0,0,0,0.4);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">HEADER</div>
JSFiddle version
Whenever the page is scrolled we save the current distance from the top of the document in a variable (scroll
).
If the current position is greater than 0 we add the class active
to #header
.
If the current position is equal to 0 we remove the class.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With