Requested
Seen
20 instances
I’ve a header like so:
.header-wrapper {
padding: 32px 24px 0 24px;
show: flex;
place: sticky;
high: 0;
z-index: 3;
background-color: $color-white;
}<header class="header-wrapper">
<h2 data-qa="customersTitle" class="header-label">Clients</h2>
</header>The header-wrapper class is written like above and can’t be modified. It will need to have a show:flex; attribute, in any other case some components break.
What I want is: after scrolling slightly bit, a shadow to look underneath the header. How can I try this? (If I do not use show:flex it really works. However i want to make use of it)
Thanks rather a lot upfront!
1,3267 silver badges15 bronze badges
requested 26 minutes in the past
You’ll be able to obtain this with a jQuery scroll operate. I’ve created this as a small little demo, the styling won’t be the identical as yours, simply make certain the lessons are right throughout the JavaScript!
The shadow might be added as soon as you’ve got scrolled 200px down. If you wish to make the scroll distance larger or smaller you’ll be able to change the worth at scroll_distance = 200
Notice: I made the header gray only for testing functions solely proper now so it is simpler to see it.
$(window).scroll(operate() {
var scroll = $(window).scrollTop();
var scroll_distance = 200;
if (scroll >= scroll_distance) {
$(".header-wrapper").addClass("one-edge-shadow");
}
if (scroll <= scroll_distance) {
$(".header-wrapper").removeClass("one-edge-shadow");
}
});.header-wrapper {
padding: 32px 24px 0 24px;
show: flex;
place: sticky;
high: 0;
z-index: 3;
background-color: #eee;
}
.one-edge-shadow {
-webkit-box-shadow: 0 14px 12px -6px gray;
-moz-box-shadow: 0 14px 12px -6px gray;
box-shadow: 0 14px 12px -6px gray;
}
.wrapper {
peak:2000px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="header-wrapper">
<h2 data-qa="customersTitle" class="header-label">Clients</h2>
</header>
<div class="wrapper">
</div>
2
window.addEventListener("scroll", (occasion) => {
let scroll = this.scrollY;
if (scroll > 10) {
doc.querySelector(".header-wrapper").classList.add("shadow");
} else {
doc.querySelector(".header-wrapper").classList.take away("shadow");
}
});.header-wrapper {
padding: 32px 24px 0 24px;
show: flex;
place: sticky;
high: 0;
z-index: 3;
background-color: #eee;
}
.shadow {
-webkit-box-shadow: 0 14px 12px -6px gray;
-moz-box-shadow: 0 14px 12px -6px gray;
box-shadow: 0 14px 12px -6px gray;
}
.wrapper {
peak: 200vh;
}<header class="header-wrapper">
<h2 data-qa="customersTitle" class="header-label">Clients</h2>
</header>
<div class="wrapper">
</div>
default
