title: Sticky Navbar not working with Perspective css Property in Paralax Scrolling
body: <p>I figured out that the Perspective CSS property I have listed in my div for a parallax scrolling is causing my sticky navbar function to not work at all.</p>
  
  <p>Does anyone have suggestions?</p>
  
  <p>Here's a link to my code: <a href="https://jsbin.com/luresosone/edit?html,css,js,output" rel="nofollow noreferrer">https://jsbin.com/luresosone/edit?html,css,js,output</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.navbar').affix({
    offset: {
      top: function() {
        return (this.top = $('.navbar').offset().top)
      }
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;meta name="viewport" content="width=device-width" /&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
    &lt;link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans" /&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /&gt;
    &lt;link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /&gt;
  
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="parallax"&gt;
      &lt;div class="jumbotron"&gt;
        &lt;div class="container text-center"&gt;
          &lt;p&gt;fdsfdsfsdfdsfsd&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;nav class="navbar navbar-default navbar-static-top"&gt;
        &lt;div class="container-fluid"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;a class="navbar-brand" href="index.html"&gt;sadsadasd&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div id="myNavbar" class="collapse navbar-collapse"&gt;
            &lt;ul class="nav navbar-nav"&gt;
              &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;hgfgfsf&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;dsasafew&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;dsadsaf&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;dsadasd&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Cdas&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  
      &lt;div id="group1" class="parallax__group"&gt;
        &lt;div class="parallax__layer parallax__layer--base"&gt;&lt;/div&gt;
        &lt;div class="parallax__layer parallax__layer--fore"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="group2" class="parallax__group"&gt;
        &lt;div class="parallax__layer parallax__layer--back"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;p style="font-size: 20px"&gt;Some code to waste space to make the sticky navbar work&lt;/p&gt;
      &lt;p style="font-size: 20px"&gt;Some code to waste space to make the sticky navbar work&lt;/p&gt;
      &lt;p style="font-size: 20px"&gt;Some code to waste space to make the sticky navbar work&lt;/p&gt;
      &lt;p style="font-size: 20px"&gt;Some code to waste space to make the sticky navbar work&lt;/p&gt;
      &lt;p style="font-size: 20px"&gt;Some code to waste space to make the sticky navbar work&lt;/p&gt;
      &lt;p style="font-size: 20px"&gt;Some code to waste space to make the sticky navbar work&lt;/p&gt;
      &lt;p style="font-size: 20px"&gt;Some code to waste space to make the sticky navbar work&lt;/p&gt;
      &lt;p style="font-size: 20px"&gt;Some code to waste space to make the sticky navbar work&lt;/p&gt;
      &lt;p style="font-size: 20px"&gt;Some code to waste space to make the sticky navbar work&lt;/p&gt;
      &lt;p style="font-size: 20px"&gt;Some code to waste space to make the sticky navbar work&lt;/p&gt;
      &lt;p style="font-size: 20px"&gt;Some code to waste space to make the sticky navbar work&lt;/p&gt;
      &lt;p style="font-size: 20px"&gt;Some code to waste space to make the sticky navbar work&lt;/p&gt;
      &lt;p style="font-size: 20px"&gt;Some code to waste space to make the sticky navbar work&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>