Shadow appear on the right of a sticky table column when scrolling

user_243302 0
Viewed 1325

I currently achieve the look of the first image here by applying border-collapse: separate to the table and border-right: dashed 1px #dddddd as well as position: sticky and left: 0 to the td:

enter image description here

When scrolling horizontally, is there a pure CSS way of making a shadow appear as follows:

enter image description here

box-shadow html-table css
1 Answers

There is no pure CSS way to detect a position: sticky element. But there is a way to detect it with JS and interact with any element on it.

var observer = new IntersectionObserver(function(entries) {
 if(entries[0].intersectionRatio === 0)
  document.querySelector("#nav-container").classList.add("nav-container-sticky");
 else if(entries[0].intersectionRatio === 1)
  document.querySelector("#nav-container").classList.remove("nav-container-sticky");
}, { threshold: [0,1] });

observer.observe(document.querySelector("#nav-container-top"));
body {
 margin: 0px;
 font-family: Roboto, Tahoma;
}

#logo-container {
 background-color: #bdc3c7;
 height: 100px;
}

#nav-container-top {
 background-color: #bdc3c7;
 height: 1px;
}

#nav-container {
 background-color: #2980b9;
 height: 60px;
 line-height: 60px;
 color: white;
 text-align: center;
 font-size: 25px;
 position: sticky;
 top: 0;
 font-weight: 700;
 transition: font-size 0.2s ease-out;
}

.nav-container-sticky {
 background-color: #e74c3c !important;
 font-size: 18px !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

#main-container {
 background-color: #ecf0f1;
 height: 2000px;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id="logo-container"></div>
  <div id="nav-container-top"></div>
  <div id="nav-container">Navigation Container</div>
  <div id="main-container"></div>
</body>
</html>

Took manual from here https://usefulangle.com/post/108/javascript-detecting-element-gets-fixed-in-css-position-sticky

user_31871270
Related