Question

$(function(){
  $(window).on('scroll', function(){
    if($(window).scrollTop() >= $('.sunContainer').height() ) {
      $('.nav').addClass('stick');
    } else {
      $('.nav').removeClass('stick');
    }
  });
});

html, body {
  background-size: cover;
  background-attachment: fixed;
  text-align: center;
}

.stick {
  position: fixed;
}

#wrapper {
  height:3000px;
  width: 100%;
  text-align: center;
}


.nav {
  width: 90%;
  height:50px;
  background-color:#FFB00F;
  text-align: center;
  margin: 0 auto;

}

.tab_holder {
  width:1000px;
  text-align: center;

}

li {
  width:120px;
  height:50px;
  display: inline-block;
  text-align: center;

}

li:hover {
  background-color:#2F4F4F;
}


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

.imge {
  margin-top: 50px;
}

.sunContainer {
  background-color:#187249;
  width:100%;
  height:700px;
  text-align: center;
}

.content {
  background-color: lightsalmon;
  width:100%;
  height:700px;
}

.third {
  background-color: khaki;
  width:100%;
  height:700px;
}

<!DOCTYPE>
<html>
  <head>
    <link href='sunset.css' rel='stylesheet'>
  </head>
  <body id='body'>
    <div id='wrapper'>

      <div class='sunContainer'>
        
        <div class='nav'>
          <ul class='tab_holder'>
            <li><a href='#'>About</a></li>
            <li><a href='#'>The Kidd Frankie</a></li>
            <li><a href='#'>Contact</a></li>
          </ul>
        </div>
        <!-- Find a picture of the rising sun  -->
        <img class='imge' src='one.jpg'>
        <img class='imge' src='two.jpg'>
        <img class='imge' src='three.jpg'>
        <img class='imge' src='four.jpg'>
      </div>

      <div class='content'>
          Stuff will be here
    </div>

    <div class='third'></div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src='sunset.js'></script>
  </body>
</html>

虽然只是试验和玩耍，但我遇到了一个问题。问题是每当我的导航器添加类时，它只会向左浮动。起初我以为是因为我没有在.stick类中添加任何东西，但意识到这不是问题。有没有遇到过这个问题？看起来像是一个css问题，而不是js。提前谢谢！

Answer 1

您使用margin: 0 auto将导航设为中心。但是，当position: fixed课程分配.stick时，此中心方法不再适用 - 它仅适用于position: relative个元素。

由于CSS中没有其他参数，因此作为固定元素，它只是放在默认位置left: 0

您可以通过为其分配left: 50%;和transform: translateX(-50%);来避免这种情况。

＆＃13;

$(function(){
  $(window).on('scroll', function(){
    if($(window).scrollTop() >= $('.sunContainer').height() ) {
      $('.nav').addClass('stick');
    } else {
      $('.nav').removeClass('stick');
    }
  });
});

＆＃13;

html, body {
  background-size: cover;
  background-attachment: fixed;
  text-align: center;
}

.stick {
  position: fixed;
  left: 50%;
  transform: translatex(-50%);
}

#wrapper {
  height:3000px;
  width: 100%;
  text-align: center;
}


.nav {
  width: 90%;
  height:50px;
  background-color:#FFB00F;
  text-align: center;
  margin: 0 auto;

}

.tab_holder {
  width:1000px;
  text-align: center;

}

li {
  width:120px;
  height:50px;
  display: inline-block;
  text-align: center;

}

li:hover {
  background-color:#2F4F4F;
}


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

.imge {
  margin-top: 50px;
}

.sunContainer {
  background-color:#187249;
  width:100%;
  height:700px;
  text-align: center;
}

.content {
  background-color: lightsalmon;
  width:100%;
  height:700px;
}

.third {
  background-color: khaki;
  width:100%;
  height:700px;
}

＆＃13;

<!DOCTYPE>
<html>
  <head>
    <link href='sunset.css' rel='stylesheet'>
  </head>
  <body id='body'>
    <div id='wrapper'>

      <div class='sunContainer'>
        
        <div class='nav'>
          <ul class='tab_holder'>
            <li><a href='#'>About</a></li>
            <li><a href='#'>The Kidd Frankie</a></li>
            <li><a href='#'>Contact</a></li>
          </ul>
        </div>
        <!-- Find a picture of the rising sun  -->
        <img class='imge' src='one.jpg'>
        <img class='imge' src='two.jpg'>
        <img class='imge' src='three.jpg'>
        <img class='imge' src='four.jpg'>
      </div>

      <div class='content'>
          Stuff will be here
    </div>

    <div class='third'></div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src='sunset.js'></script>
  </body>
</html>

＆＃13;

当我将位置更改为固定时，为什么我的导航器会向左浮动？如何解决该问题并使其保持中心？

1 个答案: