Question

我发现我在div中列出的用于视差滚动的Perspective CSS属性导致我的粘性导航栏功能完全不起作用。

有人有建议吗？

这是我的代码的链接：https://jsbin.com/luresosone/edit?html,css,js,output

＆＃13;

$('.navbar').affix({
  offset: {
    top: function() {
      return (this.top = $('.navbar').offset().top)
    }
  }
});

＆＃13;

@media (max-width: 600px) {
  .carousel-caption {
    display: none;
  }
  .navbar {
    margin-bottom: 0;
    border-radius: 0;
  }
  .row.content {
    height: 450px
  }
  .sidenav {
    padding-top: 20px;
    background-color: #f1f1f1;
    height: 100%;
  }
}

@media (max-width: 767px) {
  .sidenav {
    height: auto;
    padding: 15px;
  }
  .row.content {
    height: auto;
  }
}

.panel-footer.panel-custom {
  background: red;
  color: white;
}

.navbar.navbar-default.affix {
  top: 0;
  width: 100%;
}

.jumbotron {
  margin-bottom: 0;
}


/* Parllax scrolling styling starts */

.parallax {
  height: 100vh;
  overflow-x: auto;
  /* I believe this is causing the issue */
  -webkit-perspective: 300px;
  perspective: 300px;
  /* I believe this is causing the issue */
}

.parallax__group {
  position: relative;
  height: 500px;
  height: 100vh;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.parallax__layer--fore {
  -webkit-transform: translateZ(90px) scale(.7);
  transform: translateZ(90px) scale(.7);
  z-index: 1;
}

.title {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#group1 {
  z-index: 5;
  /* Slide over group 2 */
  background-color: transparent
}

#group1 .parallax__layer--base {
  background: red;
  height: 65%
}

#group1 .parallax__layer--fore {
  background: yellow left:27%;
  top: 20%
}

#group2 {
  z-index: 3;
  /* Slide under groups 1 and 3 */
}

#group2 .parallax__layer--back {
  background: green;
  background-size: cover;
  height: 616px;
  padding-top: 140px;
  padding-bottom: 140px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>JS Bin</title>
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="parallax">
    <div class="jumbotron">
      <div class="container text-center">
        <p>fdsfdsfsdfdsfsd</p>
      </div>
    </div>
    <nav class="navbar navbar-default navbar-static-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html">sadsadasd</a>
        </div>

        <div id="myNavbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">hgfgfsf</a></li>
            <li><a href="#">dsasafew</a></li>
            <li><a href="#">dsadsaf</a></li>
            <li><a href="#">dsadasd</a></li>
            <li><a href="#">Cdas</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <div id="group1" class="parallax__group">
      <div class="parallax__layer parallax__layer--base"></div>
      <div class="parallax__layer parallax__layer--fore"></div>
    </div>

    <div id="group2" class="parallax__group">
      <div class="parallax__layer parallax__layer--back"></div>
    </div>
    <p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
    <p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
    <p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
    <p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
    <p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
    <p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
    <p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
    <p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
    <p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
    <p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
    <p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
    <p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
    <p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
</body>
</html>

＆＃13;

Answer 1

为什么不将navbar保留在parallax之外？这将解决您的问题。 Reference

<强> Fiddle demo

Sticky Navbar在Paralax滚动中不使用Perspective css属性

1 个答案: