javascript - 动态检测位置是否为:sticky is supported by the browser

Question

有没有办法使用 Javascript 或 jQuery 检测浏览器是否支持 position:sticky ？

我知道大多数现代浏览器都支持它，但一些旧版浏览器和一些移动浏览器不支持。

我对 Polyfill 不感兴趣。我只想在 position:sticky 有效时执行某些操作，否则就保持原样。

Answer 1

检查 CSS 功能是否可用的一个强大而有效的方法是使用 CSS.supports JavaScript 函数:

if (CSS && CSS.supports && CSS.supports("position", "sticky")) {
  // awesome: position:sticky is supported on this browser!
} else {
  // fallback: I cannot rely on position:sticky!
}

我希望这能回答您的问题，但我认为值得一提的是，如果您想使用 CSS.supports() 您至少应该考虑仅使用 CSS 来应对功能的缺乏独自的。虽然 JavaScript 是对页面进行动态更改的好方法，但您通常不需要它来让页面响应功能的缺乏。这尤其适用于诸如粘性之类的 CSS 功能。

例如

/* 
  ...
  Basic styles for old browsers that don't support sticky go here.
  ... 
 */

@supports (position:sticky) { 
  /* Overrides to the above styles for modern "sticky" browsers go here */
}

即使如此，您通常也不需要这么花哨。例如，假设您有一个导航栏，如果可能的话，您希望将其设置为 position:sticky，否则只是 position:absolute。即使某些浏览器不理解sticky，您也可以说:

.my-nav-bar {
  
  /* The fallback goes first */
  position: absolute; 

  /* This 'enhancement' is ignored if not understood, */
  /* but overrides the previous value if the browser supports it. */
  position: sticky; 

  top: 50px;
  /* ... etc ... */
}