如何更改粘性标题的背景

时间：2019-03-22 13:30:18

标签： javascript html css

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

当用户开始滚动并且页面显示BindingFlags.NonPublic .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;
}

Codepen

2 个答案:

答案 0 :(得分：1)

您应该为此使用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>

答案 1 :(得分：-1)

将此添加到您的Codepen的javascript部分。您还需要确保已从codepen javascript标签上的设置菜单中选择了jquery库（codepen的文档可以为您提供帮助）。这应该可以帮助您入门。

欢呼

$(window).on('load scroll resize orientationchange', function () {
    if ($(window).scrollTop() < 67) { 
        $('.header').css("background-color", "transparent");
    }
    else{
     
        $('.header').css("background-color", "rgba(55, 55, 62, 0.6)");
    }
  });
* {
  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;
}
<!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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="./index.js"></script>
  </body>
</html>

相关问题
最新问题