个人中心
gpt4 book ai didi

javascript - 基于背景颜色的倒置 Logo

转载 作者：行者123 更新时间：2023-11-30 13:57:51 24 4
gpt4 key购买 nike

我想知道是否有人发现了一种根据页面“部分”轮换出 Logo 的绝妙方法。

更详细地说，我在透明导航栏上有一个 Logo ，假设是一个白色 Logo 。

我的页面被分成几个部分，一些是灰色/浅色背景，一些是深色/黑色背景。当我滚动时，我希望粘性 Logo 将换成相反的颜色。为此，我尝试使用 id='white 和 id=black 等 ID 命名每个部分。

然后，一旦我向下滚动并点击它，我就会触发该功能并换出图片，不过，我意识到它只检测到白色的第一个 ID 或黑色的第二个 ID。

不确定如何解决这个问题，然后为每个部分创建一个唯一的 ID，这看起来很野蛮。 

window.onscroll = function() {
  myFunction()
};


function myFunction() {
  if ($(this).scrollTop() >= $('#white').position().top) {
    logoSwap(0);
  } else if (($(this).scrollTop() >= $('#black').position().top)) {
    logoSwap(1);

  }

}

function logoSwap(which) {
  if (which) {
    $('#logo').css("background-color", "black");
  } else {
    $('#logo').css("background-color", "white");
  }
}
#logo {
  position: fixed;
  top: 0;
  left: 0;
  height: 50px;
  width: 50px;
  background-color: black;
}

.h500 {
  height: 500px;
}

.white {
  background-color: white;
}

.black {
  background-color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="logo">
</div>

<section id="white" class='h500 white'>
</section>
<section id="black" class='h500 black'>
</section>
<section id="white" class='h500 white'>
</section>
<section id="black" class='h500 black'>
</section>

最佳答案

您必须使用类而不是 id，因为文档中必须只有一个元素具有相同的 id，这与类相反。

关于脚本:想法是迭代所有 .white 或 .black 部分并获取每个部分的顶部和底部，这将允许您在处理滚动事件时验证您的 Logo 是否在给定部分内(在部分的顶部和底部位置之间)

编辑:我将此代码(使用纯 javascript)添加到我的评论中。

const whites = [...document.querySelectorAll('.white')].map(e => ({
    top: e.getBoundingClientRect().top,
    bottom: e.getBoundingClientRect().bottom
}));

//If you have a logic of only white and black sections, you can omit blacks, else you can use them

// const blacks = [...document.querySelectorAll('.black')].map(e => ({top: e.top, bottom: e.bottom}));

const logo = document.querySelector('#logo');

document.addEventListener('scroll', () => {
    let position = (logo.getBoundingClientRect().bottom + logo.getBoundingClientRect().top) / 2 + window.scrollY;
    for (let i = 0; i < whites.length; i++) {
        if (position >= whites[i].top && position <= whites[i].bottom) {
            logo.classList.remove('whiteLogo');
            logo.classList.add('blackLogo');
            return;
        }
    }

    logo.classList.remove('blackLogo');
    logo.classList.add('whiteLogo');
});
*,
html,
body {
    margin: 0;
    padding: 0;
}

section {
    height: 200px;
}

.black,
.blackLogo {
    background: black;
}

.white,
.whiteLogo {
    background: white;
}

#logo {
    position: fixed;
    top: 0;
    left: 0;
    height: 50px;
    width: 50px;
}
<!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>
</head>

<body>
    <div id="logo" class="whiteLogo"></div>
    <section class="black"></section>
    <section class="white"></section>
    <section class="black"></section>
    <section class="black"></section>
    <section class="white"></section>
    <section class="black"></section>
</body>

</html>

关于javascript - 基于背景颜色的倒置 Logo ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56875937/

24 4 0
文章推荐： php - Swift:NSURL 正确地从 Playground 中的 URL 返回 HTML，但在应用程序中使用时会使模拟器崩溃
文章推荐： c# - 使用 .NET HttpClient 类时，是否有一种简单的方法来格式化查询字符串？
文章推荐： swift - 将对象传递出响应处理程序
文章推荐： c# - 隐式与显式转换运算符最佳实践
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com