滚动时在粘性表格列的右侧出现阴影答案

【问题标题】：Shadow appear on the right of a sticky table column when scrolling滚动时在粘性表格列的右侧出现阴影
【发布时间】：2020-05-22 06:13:42
【问题描述】：

我目前通过将border-collapse: separate 应用于table 和border-right: dashed 1px #dddddd 以及将position: sticky 和left: 0 应用于td 来实现此处的第一张图像的外观：

水平滚动时，有没有纯CSS的方式让阴影出现如下：

【问题讨论】：

标签： css html-table box-shadow

【解决方案1】：

没有纯 CSS 方法来检测 position: sticky 元素。但是有一种方法可以用 JS 检测它并与它上面的任何元素进行交互。

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>

从这里获取手册https://usefulangle.com/post/108/javascript-detecting-element-gets-fixed-in-css-position-sticky

【讨论】：