Question

我是JS的初学者。我有一项任务是创建一个由几个块组成的列。每个块都应该有它的标题。每个标题应该是不同的颜色。在下一个标题到达顶部时滚动，它应该粘在顶部并将前一个标题的背景颜色更改为最近出现在顶部的标题的颜色。如何使用纯JS并考虑响应性并采用横向方向？ sample gif 谢谢

UPD：到目前为止，我已经完成了以下代码。当我在笔记本电脑上运行它时，它或多或少都很好。但是一旦我调整窗口大小，粘性标题就会向右移动。我错过了什么秘密？

! function(name, definition) {
  if (typeof module != 'undefined' && module.exports) module.exports = definition();
  else if (typeof define == 'function') define(definition);
  else this[name] = definition();
}('sticky', function() {

  return function sticky(el, top, options) {

    var requiredOriginalStyles = ['position', 'top', 'left', 'z-index'];

    var requiredTop = top || 0;
    var originalRect = calcRect(el);
    var styles = {
      position: 'fixed',
      top: requiredTop + 'px',
      left: originalRect.left + 'px',
      // width: originalRect.width + 'px',
      'z-index': 9999
    }

    if (options && options.enforceWidth) {
      styles.width = originalRect.width + 'px';
    }

    var originalStyles = {}
    requiredOriginalStyles.forEach(function(key) {
      originalStyles[key] = el.style[key];
    });

    var onscroll;
    if (window.onscroll) {
      onscroll = window.onscroll;
    }

    window.onscroll = function(event) {
      if (getWindowScroll().top > originalRect.top - requiredTop) {
        for (key in styles) {
          el.style[key] = styles[key];
        }
      } else {
        for (key in originalStyles) {
          el.style[key] = originalStyles[key];
        }
      }
      onscroll && onscroll(event)
    }
  }

  function calcRect(el) {
    var rect = el.getBoundingClientRect();
    var windowScroll = getWindowScroll()
    return {
      left: rect.left + windowScroll.left,
      top: rect.top + windowScroll.top,
      width: rect.width,
      height: rect.height
    }
  }

  function getWindowScroll() {
    return {
      top: window.pageYOffset || document.documentElement.scrollTop,
      left: window.pageXOffset || document.documentElement.scrollLeft
    }
  }

});

var headers = document.querySelectorAll('.header')
Array.prototype.forEach.call(headers, function(header) {
  sticky(header);
});

body {
  height: 2000px;
  margin: 0px;
  background: #fff;
  color: #333;
  font: 14px/2 Roboto, Verdana, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section:first-child {
  margin-top: 50px;
}

.header--initial {
  background: yellow linear-gradient(to right, grey, transparent, grey);
}

.header--main-start {
  background: grey linear-gradient(to right, grey, yellow);
}

.header--main-end {
  background: yellow linear-gradient(to right, yellow, grey);
}

.header--final {
  background: grey linear-gradient(to right, yellow, transparent, yellow);
}

p {
  padding: 10px;
}

.header {
  width: 50%;
  height: 50px;
  margin: auto;
  background-color: #333;
}

.placeholder {
  height: 300px;
  width: 50%;
  margin: auto;
  overflow: auto;
}

<section>
  <div class="header header--initial"></div>
  <div class="placeholder">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum veritatis dolorem ducimus atque cumque accusantium accusamus aliquam excepturi nulla illo corrupti vitae repellendus quod, molestias esse est nisi, omnis odit.</p>
    <p>Soluta autem, aut voluptate quo debitis quidem exercitationem quisquam nostrum accusamus aliquam perspiciatis nobis dolores est dolorum provident! Asperiores explicabo fugit, unde eveniet ut nesciunt autem molestiae nam totam fuga.</p>
    <p>Vel nisi a dolorem itaque eaque mollitia ipsum repellat modi placeat, eveniet consectetur officia veniam ab esse, adipisci quia unde excepturi consequuntur expedita quas! Sed porro sunt soluta totam delectus!</p>
  </div>
</section>
<section>
  <div class="header header--main-start"></div>
  <div class="placeholder">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum qui quidem rem ducimus, labore, id praesentium error quasi nobis saepe illo consequuntur voluptatum dolores illum facere, itaque dicta eveniet, quod.</p>
    <p>Expedita dolore vel odit est nemo quis nihil ipsam quo vitae repellendus ex optio illo magnam quidem a ullam dolores reiciendis facilis deserunt eligendi cum, sit eaque? Et, nam odio!</p>
  </div>
</section>
<section>
  <div class="header header--main-end"></div>
  <div class="placeholder">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum distinctio nobis excepturi sunt voluptates, saepe nam error laudantium velit autem quaerat placeat quisquam est dolore cum quidem, in ad sit!</p>
    <p>Ex impedit deserunt, quibusdam ipsam blanditiis sunt tempore ab aut? Cum assumenda iure minus fugiat, rem nemo alias voluptatem, ad neque temporibus blanditiis aliquam earum praesentium vero labore ducimus, a.</p>
    <p>Velit, suscipit officiis. Praesentium, explicabo similique maiores repellendus. Cupiditate voluptate corporis nisi doloremque aspernatur, autem aut officia. Eaque deleniti alias, modi dolorem quod qui debitis illo. Aut, ipsam. Hic, autem.</p>
    <p>Maiores consequatur, aliquid possimus quae asperiores corporis repudiandae! Quod id iure at dolorem consectetur, sed, debitis libero perspiciatis, numquam ea, fugit repudiandae sunt consequatur. Harum optio ut doloribus distinctio adipisci!</p>
  </div>
</section>
<section>
  <div class="header header--final"></div>
  <div class="placeholder">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt quisquam doloribus, commodi mollitia saepe nesciunt esse animi totam beatae facere tenetur veniam quas expedita iusto ipsa provident hic! Minima, repellendus.</p>
    <p>Accusamus voluptatibus laudantium commodi nostrum obcaecati impedit atque doloremque officiis? Iste necessitatibus, aperiam. Vitae facilis ipsam vel, sequi perspiciatis fugit, dolores expedita quaerat reiciendis beatae iste hic molestias cumque! Necessitatibus!
      </p>
    <p>Cum, dolore. Dolore corporis voluptas consequatur ratione fuga, laboriosam quisquam qui corrupti ut, in nam pariatur iste blanditiis nulla autem praesentium, optio maxime. Consequuntur vitae nemo eius similique, fugiat saepe.</p>
    <p>Recusandae iure iusto ut vero dolorum, hic quos libero nostrum esse enim laudantium velit modi culpa, consequatur vel officiis exercitationem quod repellat, voluptas impedit nesciunt beatae similique itaque distinctio? Sapiente.</p>
  </div>
</section>

Answer 1

尝试让<body>元素具有onresize属性，以更新下拉列表的样式：

<body onresize="updHead()">

追随滚动背景的粘性标题 - 纯JS

1 个答案: