Use CSS instead of JS for floating docs banner [#1988]

djangoproject/scss/_style.scss

@@ -12,6 +12,16 @@ CSS rendered with Libsass 0.7.0
 */
 
 //------------------- Globals
+
+html {
+  scroll-padding-top: 38px;
+}
+
+body.has-doc-warning {
+  margin-top: 38px;
+}
+
+
 body {
     @include serif;
     @include font-size(18);
@@ -2357,9 +2367,11 @@ h2+.list-link-soup {
 
 #dev-warning,
 #outdated-warning {
-    position: absolute;
+    position: fixed;
     top: 0;
+    left: 0;
     width: 100%;
+    height: 38px;
     padding: 8px 20px 8px;
     box-sizing: border-box;
     background-image: linear-gradient(135deg, rgba(0, 0, 0, .04) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .04) 50%, rgba(0, 0, 0, .04) 75%, transparent 75%, transparent);
@@ -2368,10 +2380,14 @@ h2+.list-link-soup {
     text-align: center;
     background-color: $warning-bg;
     color: $text;
+    z-index: 1000;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 
     @include respond-min(768px) {
-        position: fixed;
-        min-width: 768px;
+        white-space: normal;
+        overflow: visible;
     }
 }
 

djangoproject/static/js/djangoproject.js

@@ -151,38 +151,15 @@ document.querySelectorAll('.btn-clipboard').forEach(function (el) {
   });
 });
 
-// Compensate for floating warning element when scrolling to a URL hash in docs
-(function () {
-  const warning_el = document.querySelector('.doc-floating-warning');
-
-  if (!warning_el) {
-    return;
-  }
-
-  // This element will dynamically enforce the correct amount of top spacing
-  const warning_el_copy = warning_el.cloneNode(true);
-
-  warning_el_copy.style.position = 'relative';
-
-  document.body.prepend(warning_el_copy);
-
-  function scroll_to_hash(e) {
-    const target_el = document.querySelector(window.location.hash || null);
+// Add a class to the body element when a warning is present
+// This is a fallback for browsers that don't support the :has() selector
+document.addEventListener('DOMContentLoaded', function () {
+  const warning = document.querySelector('#dev-warning, #outdated-warning');
 
-    if (!target_el) {
-      return;
-    }
-
-    const y_position = target_el.getBoundingClientRect().top + window.scrollY;
-    const correction = -warning_el.offsetHeight - 4;
-
-    window.scrollTo(0, y_position + correction);
+  if (warning) {
+    document.body.classList.add('has-doc-warning');
   }
-
-  setTimeout(scroll_to_hash, 50);
-
-  window.addEventListener('hashchange', scroll_to_hash);
-})();
+});
 
 // Update donate button text on fundraising page based on interval selection
 (function () {