搜索
搜索

如何更改粘性标题的背景

Pavel 发表于 Dev
21
帕维尔

我有一个带有粘性标题的登录页面。

当用户开始滚动并且页面显示.second-section .header元素应该更改background-color属性。怎么做才对？

* {
  box-sizing: border-box;
}

html,
body {
  width: 100vw;
}

body {
  margin: 0;
  overflow-y: scroll;
  overflow-x: hidden;

  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--header-height);
}

:root {
  --header-height: 100px;
}

.header {
  position: sticky;
  top: 0;
  width: 100%;
  height: var(--header-height);

  border-bottom: 1px solid rebeccapurple;
  background-color: burlywood;
}

.main {
}

.section {
  display: flex;
  height: calc(100vh - var(--header-height));
  scroll-snap-align: start;
}

.section__item {
  flex: 1 0 50%;
}

.first-section {
  background-color: aquamarine;
}

.first-section-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.first-section-left__text {
  margin: 0 0 70px 0;
  line-height: 1.5;
}

.first-section-left__button {
  align-self: flex-start;
}

.second-section {
  background-color: azure;
}

.galery {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  grid-auto-rows: minmax(80px, auto);
  grid-auto-flow: dense;
}

.galery_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galery_item:nth-child(2) {
  grid-row: 2;
}

.galery_item:nth-child(4) {
  grid-column-end: span 3;
  grid-row-end: 3;
}

.galery_item:nth-child(5) {
  grid-column-end: span 3;
}

.galery_item:nth-child(7) {
  grid-column-end: span 4;
}

.galery_item:nth-child(8) {
  grid-column-end: span 3;
}

.galery_item:nth-child(10) {
  grid-row: 3 / span 2;
}

.galery_item:nth-child(11) {
  grid-row: 2;
}

.galery_item:nth-child(9) {
  grid-row: 5;
  grid-column: 5;
}

.galery_item:nth-child(12) {
  grid-column-end: span 3;
}
<header class="header">header</header>
<main class="main">
  <section class="section first-section">
    <div class="section__item first-section-left">
      <p class="first-section-left__text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci assumenda optio nesciunt deleniti voluptas. Amet ratione, necessitatibus deserunt natus ipsum ea magni debitis minima quod eum. Vel at praesentium magnam.
      </p>
      <button class="first-section-left__button">Button</button>
    </div>
    <div class="section__item galery">
      <div class="galery_item">
        <img src="https://source.unsplash.com/category/nature/" alt="title" />
      </div>
      <div class="galery_item">
        <img src="https://source.unsplash.com/category/buildings/" alt="title" />
      </div>
      <div class="galery_item">
        <img src="https://source.unsplash.com/daily" alt="title" />
      </div>
      <div class="galery_item">
        <img src="https://source.unsplash.com/random" alt="title" />
      </div>
      <div class="galery_item">
        <img src="https://source.unsplash.com/category/nature/weekly" alt="title" />
      </div>
      <div class="galery_item">
        <img src="https://source.unsplash.com/user/erondu/daily" alt="title" />
      </div>
      <div class="galery_item">
        <img src="https://source.unsplash.com/weekly?water" alt="title" />
      </div>
      <div class="galery_item">
        <img src="https://source.unsplash.com/weekly?sun" alt="title" />
      </div>
      <div class="galery_item">
        <img src="https://source.unsplash.com/weekly?flowers" alt="title" />
      </div>
      <div class="galery_item">
        <img src="https://source.unsplash.com/weekly?cars" alt="title" />
      </div>
      <div class="galery_item">
        <img src="https://source.unsplash.com/weekly?car" alt="title" />
      </div>
      <div class="galery_item">
        <img src="https://source.unsplash.com/weekly?boss" alt="title" />
      </div>
    </div>
  </section>
  <section class="section second-section">2</section>
  <section class="section third-section">3</section>
</main>

代码笔

雷纳德

您应该为此使用 javascript。这是一个应该可以工作的 JS 函数，它带有一个新的 css 类：

window.addEventListener('scroll',detectScroll);

function detectScroll() {
    let section2 = document.querySelector('.second-section');
    let header = document.querySelector('.header');
    if (section2.getBoundingClientRect().bottom > 0 && section2.getBoundingClientRect().top < document.documentElement.clientHeight) {
        header.classList.add('bg-red');
    } else {
        header.classList.remove('bg-red');
    }
}
* {
  box-sizing: border-box;
}

html,
body {
  width: 100vw;
}

body {
  margin: 0;
  overflow-y: scroll;
  overflow-x: hidden;

  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--header-height);
}

:root {
  --header-height: 100px;
}

.header {
  position: sticky;
  top: 0;
  width: 100%;
  height: var(--header-height);

  border-bottom: 1px solid rebeccapurple;
  background-color: burlywood;
}

.bg-red {
  background-color: #f86;
}

.main {
}

.section {
  display: flex;
  height: calc(100vh - var(--header-height));
  scroll-snap-align: start;
}

.section__item {
  flex: 1 0 50%;
}

.first-section {
  background-color: aquamarine;
}

.first-section-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.first-section-left__text {
  margin: 0 0 70px 0;
  line-height: 1.5;
}

.first-section-left__button {
  align-self: flex-start;
}

.second-section {
  background-color: azure;
}

.galery {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  grid-auto-rows: minmax(80px, auto);
  grid-auto-flow: dense;
}

.galery_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galery_item:nth-child(2) {
  grid-row: 2;
}

.galery_item:nth-child(4) {
  grid-column-end: span 3;
  grid-row-end: 3;
}

.galery_item:nth-child(5) {
  grid-column-end: span 3;
}

.galery_item:nth-child(7) {
  grid-column-end: span 4;
}

.galery_item:nth-child(8) {
  grid-column-end: span 3;
}

.galery_item:nth-child(10) {
  grid-row: 3 / span 2;
}

.galery_item:nth-child(11) {
  grid-row: 2;
}

.galery_item:nth-child(9) {
  grid-row: 5;
  grid-column: 5;
}

.galery_item:nth-child(12) {
  grid-column-end: span 3;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <header class="header">header</header>
    <main class="main">
      <section class="section first-section">
        <div class="section__item first-section-left">
          <p class="first-section-left__text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci
            assumenda optio nesciunt deleniti voluptas. Amet ratione,
            necessitatibus deserunt natus ipsum ea magni debitis minima quod
            eum. Vel at praesentium magnam.
          </p>
          <button class="first-section-left__button">Button</button>
        </div>
        <div class="section__item galery">
          <div class="galery_item">
            <img
              src="https://source.unsplash.com/category/nature/"
              alt="title"
            />
          </div>
          <div class="galery_item">
            <img
              src="https://source.unsplash.com/category/buildings/"
              alt="title"
            />
          </div>
          <div class="galery_item">
            <img src="https://source.unsplash.com/daily" alt="title" />
          </div>
          <div class="galery_item">
            <img src="https://source.unsplash.com/random" alt="title" />
          </div>
          <div class="galery_item">
            <img
              src="https://source.unsplash.com/category/nature/weekly"
              alt="title"
            />
          </div>
          <div class="galery_item">
            <img
              src="https://source.unsplash.com/user/erondu/daily"
              alt="title"
            />
          </div>
          <div class="galery_item">
            <img src="https://source.unsplash.com/weekly?water" alt="title" />
          </div>
          <div class="galery_item">
            <img src="https://source.unsplash.com/weekly?sun" alt="title" />
          </div>
          <div class="galery_item">
            <img src="https://source.unsplash.com/weekly?flowers" alt="title" />
          </div>
          <div class="galery_item">
            <img src="https://source.unsplash.com/weekly?cars" alt="title" />
          </div>
          <div class="galery_item">
            <img src="https://source.unsplash.com/weekly?car" alt="title" />
          </div>
          <div class="galery_item">
            <img src="https://source.unsplash.com/weekly?boss" alt="title" />
          </div>
        </div>
      </section>
      <section class="section second-section">2</section>
      <section class="section third-section">3</section>
    </main>
    <script src="./index.js"></script>
  </body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在 angular 11 中更改滚动时的粘性标题背景颜色

如何更改标题背景颜色？

如何更改GroupBox的标题背景？

如何更改JTable的标题背景颜色？

悬停时如何更改 QTreewidget 标题背景

如何更改jqGrid标题背景颜色？

如何根据位置更改标题背景颜色

使用粘性元素更改背景颜色

我该如何使表格标题保持粘性？

如何修复滚动上的粘性标题？

如何在PIVOT表中更改默认标题背景颜色

如何动态更改导航抽屉的标题布局背景颜色？

如何根据列标题日期更改列的背景颜色

如何在flutter中使用alertDialog更改标题的背景颜色？

如何将标题的背景颜色从透明更改为白色？

如何使用vanilla Javascript更改滚动标题的背景颜色

如何更改引导程序模式标题颜色（背景和文本）

如何从Qt上的标题（水平/垂直）QTableWidget更改背景颜色？

如何更改WooCommerce商店页面标题背景颜色？

如何更改应用程序背景的标题颜色？

如何更改反应路由器上的标题背景？

如何根据 div offsetHeight 更改标题的背景颜色？

如何更改 Wordpress 网站上的标题背景颜色

如何在 React Native 中更改完整标题的背景颜色

如何使用CSS创建粘性背景？

更改滚动标题的背景颜色

如何使粘性标题中的文本和图标变黑？

如何使用反应在滚动上创建粘性标题

如何在Android中制作粘性部分标题（如iOS）？

TOP 榜单

  1. 1

    Android Studio Kotlin：提取为常量

  2. 2

    IE 11中的FormData未定义

  3. 3

    计算数据帧R中的字符串频率

  4. 4

    如何在R中转置数据

  5. 5

    如何使用Redux-Toolkit重置Redux Store

  6. 6

    Excel 2016图表将增长与4个参数进行比较

  7. 7

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  8. 8

    未捕获的SyntaxError：带有Ajax帖子的意外令牌u

  9. 9

    OpenCv：改变 putText() 的位置

  10. 10

    ActiveModelSerializer仅显示关联的ID

  11. 11

    算术中的c ++常量类型转换

  12. 12

    如何开始为Ubuntu开发

  13. 13

    将加号/减号添加到jQuery菜单

  14. 14

    去噪自动编码器和常规自动编码器有什么区别？

  15. 15

    获取并汇总所有关联的数据

  16. 16

    OpenGL纹理格式的颜色错误

  17. 17

    在 React Native Expo 中使用 react-redux 更改另一个键的值

  18. 18

    http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。

  19. 19

    TreeMap中的自定义排序

  20. 20

    Redux动作正常，但减速器无效

  21. 21

    如何对treeView的子节点进行排序

热门标签

归档