UPDATED JS FIDDLE

Question

我创建了一个固定的导航栏，它位于窗口的左侧，当您向下滚动页面时，会根据悬停的div来更改颜色。

当它在位于顶部的.hero div层中的div＃triangle-left上滚动时，它可以正常工作。

我希望导航开始变白并且当它位于白色＃triangle-left div之上时变为黑色。

我在下面创建了一个js小提琴，如果有人喜欢的话，还包含了一个github repo。

HTML：

<!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">

  <!-- Stylesheets -->
  <link rel="stylesheet" href="../css/scroll.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900" rel="stylesheet">

  <title>Document</title>

</head>
<body>

  <header>

    <div class="hero">
      <div class="overlay">
        <nav class="nav white startLogo">
          <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Portfolio</a></li>
            <li><a href="">Contact</a></li>
          </ul>
        </nav>

        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 566.67 283.33"><defs><style>.cls-1{fill:#add8e6/* #fff */;}</style></defs><title>Down-Arrow</title><polygon class="cls-1" points="566.67 0 566.67 85.33 283.33 170 0 85.33 0 0 283.33 85.33 566.67 0"/><polygon class="cls-1" points="566.67 114 566.67 198.67 283.33 283.33 0 198.67 0 115 283.33 198.67 566.67 114"/></svg>

        <div id="triangle-left" class="row">
          <nav class="nav black altLogo">
            <ul>
              <li><a href="">Home</a></li>
              <li><a href="">Portfolio</a></li>
              <li><a href="">Contact</a></li>
            </ul>
          </nav>
        </div>

        <div id="triangle-right" class="row">
        </div>
      </div>
    </div>

    <div class="content row">
      <nav class="nav black altLogo">
        <ul>
          <li><a href="">Home</a></li>
          <li><a href="">Portfolio</a></li>
          <li><a href="">Contact</a></li>
        </ul>
      </nav>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div class="skewedBox row">
      <nav class="nav white altLogo">
        <ul>
          <li><a href="">Home</a></li>
          <li><a href="">Portfolio</a></li>
          <li><a href="">Contact</a></li>
        </ul>
      </nav>
      <div class="skewedBox-container">
        <h1>Online Tutorial</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>

  </header>

  <!-- Main Container -->
  <main>

    <section id="section1" class="row">
      <nav class="nav black altLogo">
        <ul>
          <li><a href="">Home</a></li>
          <li><a href="">Portfolio</a></li>
          <li><a href="">Contact</a></li>
        </ul>
      </nav>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>

    <div class="floating-boxes row">
      <div class="overlay">
        <nav class="nav white altLogo">
          <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Portfolio</a></li>
            <li><a href="">Contact</a></li>
          </ul>
        </nav>
        <!-- First Div -->
        <div id="primary">
          <div class="content">
            <h2>Article 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>

        <!-- Secondary Div -->
        <div id="secondary">
          <div class="content">
            <h2>Article 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>

        <!-- Tertiary Div -->
        <div id="tertiary">
          <div class="content">
            <h2>Article 3</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
      </div>
    </div>
  </main>

  <section id="section2" class="row">
    <nav class="nav black altLogo">
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Portfolio</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </nav>
    <h2>Our Partners</h2>
    <!-- Row 1 -->
    <div>
      <!-- Logo 1 -->
      <img src="../img/company-name.png" alt="company-name-logo"/>
      <!-- Logo 2 -->
      <img src="../img/dove.png" alt="dove-logo"/>
      <!-- Logo 3 -->
      <img src="../img/company-name.png" alt="company-name-logo"/>
      <!-- Logo 4 -->
      <img src="../img/tesco.png" alt="tesco-logo"/>
    </div>

    <!-- Row 2 -->
    <div>
      <!-- Logo 1 -->
      <img src="../img/dove.png" alt="dove-logo"/>
      <!-- Logo 2 -->
      <img src="../img/company-name.png" alt="company-name-logo"/>
      <!-- Logo 3 -->
      <img src="../img/tesco.png" alt="tesco-logo"/>
      <!-- Logo 4 -->
      <img src="../img/company-name.png" alt="company-name-logo"/>
    </div>

  </section>

  <footer>
        <div class="footer-stuff">
            <div class="social">
                <strong>Find Us On</strong>
                <ul>
                    <li><a href="" class="fa fa-twitter"><!-- Twitter --></a></li>
                    <li><a href="" class="fa fa-instagram"><!-- Facebook --></a></li>
                    <li><a href="" class="fa fa-pinterest"><!-- Pinterest --></a></li>
                    <li><a href="" class="fa fa-youtube"><!-- Instagram --></a></li>
                </ul>
            </div>

            <!-- <div class="columns three">
              <strong>OTHER SHOPS</strong>
              <ul>
                <li><a href="">Red Robin</a></li>
                <li><a href="">Emerald Eagle</a></li>
                <li><a href="">Crimson Crane</a></li>
                <li><a href="">Auburn Abbot</a></li>
              </ul>
            </div> -->

            <div class="sign-up">
                <p>
                    <strong>Sign Up for the newsletter</strong>
                    Lorem ipsum dolor sit amet,
          <br/>
          consectetur adipisicing elit.
                </p>

                <form action="">
                    <div>
                        <input class="u-full-width" type="email" placeholder="Your Email"/>
                    </div>
                    <div>
                        <input type="submit">
                    </div>
                </form>
            </div>

        </div>
    </footer>

  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="../scripts/functions.js"></script>

</body>
</html>

CSS：

* {
  font-family: 'Raleway', sans-serif;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
  /* height: 2000px; */
  /* background: red; */
  color: #333;
}

ul {
  margin: 0;
  list-style-type: none;
  padding: 0;
}

a {
  text-decoration: none;
  color: black;
}

.overlay {
  background: rgba(0,0,0,0.3);
  background-size: cover;
}



/*************************************************
HERO
**************************************************/

.hero {
  background: pink url('../img/background.jpg') no-repeat fixed;
  background-position: 100% 4%;
  background-size: cover;
  position: relative;
  /* width: 100%; */
  height: 100vh;
  /* overflow: hidden; */
}

.hero .overlay {
  /* height: 900px; */
}

/* Vertical Nav */
.nav {
    top: 0;
    left: 0;
  /* z-index: 1000; */
}

.nav li {
  font-size: .7em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-transform: uppercase;
}

.nav li a {
  display: block;
  padding: 20px;
  letter-spacing: 1px;
  transition: all .2s ease-in-out;
}

.row {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.startLogo {
  position: fixed;
}

.altLogo {
  position: absolute;
}

.white li a {
  color: white;
}

.black li a {
  color: #1d1d1d;
}

/* down arrow */
.hero svg {
  position: absolute;
  text-align: center;
  color: black;
  width: 5vw;
  left: calc(50% - 2.5vw);
  bottom: 100px;
  fill: black;
}


/* Triangle */
#triangle-left {
  position: absolute;
  /* width: 100%; */
  height: 0;
  border-top: 500px solid transparent;
  border-left: 50vw solid white;
  border-bottom: 500px solid transparent;
  /* margin-top: calc(100vh - 590.5px); */
  top: calc(100vh - 500px);
  /* left: 0; */
  /* z-index: 1; */
}

#triangle-left nav {
  /* position: fixed;
  left: -50vw;
  top: -500px;
  z-index:1000; */
}

/* #triangle-left nav li {
  font-size: .7em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-transform: uppercase;
}
#triangle-left nav li a {
  color: black;
  display: block;
  padding: 20px;
  letter-spacing: 1px;
} */



/* Triangle Right */
#triangle-right {
  position: absolute;
    width: 0;
    height: 0;
    border-top: 500px solid transparent;
    border-right: 50vw solid white;
    border-bottom: 500px solid transparent;
  top: calc(100vh - 500px);
  right: 0;
}



/* Content */
.content {
  background: white;
  padding: 100px 5% 250px;
  overflow: hidden;
  position: relative;
  margin-bottom: 20px
}

.content p {
  text-align: center;
  line-height: 40px;
  letter-spacing: 5px;
}



/**********************************************
MAIN
***********************************************/

/* Skewed Box */
.skewedBox {
  background: #add8e6;
  position: relative;
  padding: 50px 0;
  transform: skew(0deg, 5deg);
  /* z-index: -1000; */
  margin-top: -80px;
  overflow: hidden;
  /* height: 600px; */
}

.skewedBox-container {
  transform: skew(0deg, -5deg);
  padding: 100px 5%;
}

.skewedBox-container h1,
.skewedBox-container p {
  color: white;
  text-align: center;
  line-height: 40px;
  letter-spacing: 5px;
}

/* Sections */
/* Section1 */
#section1 {
  background: white;
  padding: 200px 5%;
  position: relative;
  transform: skew(0deg, 5deg);
  padding-bottom: 500px;
  margin-bottom: -300px;
}
#section1 p {
  color: black;
  text-align: center;
  line-height: 40px;
  letter-spacing: 5px;
  margin-bottom: 30px;
  transform: skew(0deg, -5deg);
}



/* Section2 */
#section2 {
  background: white;
  padding: 100px 10% 150px;
  margin-bottom: 297px;
}

#section2 h2 {
  font-size: 1.7em;
  text-align: center;
  margin-bottom: 50px;
}

#section2 div {
  display: flex;
  justify-content: space-between;
}

#section2 div:nth-child(2) {
  margin-bottom: 100px;
}

#section2 img {
  height: 150px;
  width: 150px;
}



/* Floating Boxes */
.floating-boxes {
  background: pink url('../img/background.jpg') no-repeat fixed;
  background-size: cover;
  height: 2000px;
  position: relative;
  /* z-index: -1000; */
}

.floating-boxes .overlay {
  height: 2000px;
}



/* Primary */
#primary {
  background: pink;
  height: 500px;
  width: 415px;
  padding: 20px;
  position: absolute;
  top: 10%;
  left: 6%;

  /* transform: translate(0, 20%); */
}

#primary .content {
  background: white;
  height: 505px;
  width: 415px;
  padding: 20px;
  position: absolute;
  top: -5%;
  left: -5%;
}



/* Secondary */
#secondary {
  background: lightyellow;
  height: 465px;
  width: 415px;
  padding: 20px;
  position: absolute;
  right: 4%;
  bottom: 37%;
}
#secondary .content {
  background: white;
  height: 465px;
  width: 415px;
  padding: 20px;
  position: absolute;
  top: -5%;
  left: -5%;
}



/* Tertiary */
#tertiary {
  background: lightblue;
  height: 465px;
  width: 415px;
  padding: 20px;
  position: absolute;
  left: 6%;
  bottom: 10%;
}
#tertiary .content {
  background: white;
  height: 465px;
  width: 415px;
  padding: 20px;
  position: absolute;
  top: -5%;
  left: -5%;
}



/**********************************************
FOOTER
***********************************************/

/* Universal */
footer {
    background: #add8e6;
    color: white;
    padding: 70px 5%;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: -1;
}

.footer-stuff {
  display: flex;
  justify-content: space-between;
    width: 100%;
}
.footer-stuff strong {
  display: block;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

footer a {
    color: white;
}

.social,
.sign-up {
  margin: auto ;
}



/* Social */
.social ul {
  display: flex;
}

.social ul li a {
  display: block;
  margin-bottom: 10px;
}



/* Sign-Up */
.sign-up  {
  /* margin-bottom: 20px; */
}
.sign-up p {
  margin: 0 0 10px;
}



/* Email Input */
.sign-up input[type="email"] {
  padding: 11px;
  margin-bottom: 10px;
  width: 100%;
  border: none;
}
.sign-up input[type="email"]:focus {
  outline: 0;
  color: lightblue;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.sign-up input[type="email"]::placeholder {
  color: lightblue;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Submit Input */
input[type="submit"] {
  background: lightblue;
  border: 1px solid white;
  padding: 10px;
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: white;
  transition: all .3s ease-in-out;
}
input[type="submit"]:hover {
  background: white;
  color: lightblue;
}

/* fa fa */
.social [class*="fa fa-"] {
  background-color: #333;
  border-radius: 50%;
  color: #fff;
  display: inline-block;
  height: 50px;
  line-height: 45px;
  margin: auto 3px;
  width: 50px;
  font-size: 25px;
  text-align: center;
  border: 2px solid white;
  padding-left: 1px;
}

JavaScript的：

function logoSwitch () {
      $('.altLogo').each(function() {
        $(this).css('top',
          $('.startLogo').offset().top -  $(this).closest('.row').offset().top
        );
      });
    };

    $(document).scroll(function() {logoSwitch();});

    logoSwitch();

https://jsfiddle.net/LukeBennettUK/dxm21vo1/

https://github.com/LukeBennettUK/Testing-Update-

如果您需要更多信息，请告知我们，我将很乐意编辑该帖子并将其提供给您。

非常感谢，

路

Answer 1

您需要定义z-index订单。使用最少量代码的最简单方法是在负面定义容器。

 .hero nav.nav.startLogo {
    z-index: 1;
    }
 .hero {
    z-index: -2;
    }
 footer{
    z-index:-3;
    }

由于您的页脚的值已为z-index:-1;，因此我们必须将其重新定义为z-index:-3;

要将该部分中的文字变为黑色，只需从此

更新您的html即可

<nav class="nav black startLogo">

到这个

<nav class="nav white startLogo">

或者如果你无法改变html，你可以通过添加此代码强制使用css。

.hero nav ul li a {
    color: black;
}

UPDATED JS FIDDLE

^{（我把新CSS放在上面js小提琴链接样式表的底部。）}

< / p>

滚动导航栏不会改变＃triangle-left三角形元素的颜色

1 个答案:

UPDATED JS FIDDLE