Question

我的脚本无效，我遗失了什么吗？我只希望我的navbar保持在最顶层。

$(document).ready(function(){
    $(".navbar").affix({
        offset: { 
            top: 10 
        }
    });
});

<nav class="navbar navbar-fixed-top" id="my-navbar">
    <div class="container">
        <div class="navbar-header">

.navbar {
    background: rgba(0,0,0,0);
    font-size: 10pt;
    text-transform: uppercase;
    position: fixed;

}

此规则覆盖.navbar：

#my-navbar {
    background: url(headers/macDark.jpg) no-repeat; 
    height: 800px;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: -1;
    padding-top: 30px;
}

Answer 1

这里你去的是以大写字母工作的Affix脚本

$(document).ready(function() {
  $(".navbar").affix({
    offset: {
      top: 10
    }
  });
});

.navbar {
  background: rgba(0, 0, 0, 0);
  font-size: 10pt;
  text-transform: uppercase;
  position: fixed;
}

<nav class="navbar navbar-fixed-top" id="my-navbar">
  <div class="container">
    <div class="navbar-header">
      <p>Affix script working</p>

Answer 2

您确定要使用navbar停留在顶部的脚本吗...我建议使用css这样的

.navbar {

  background: yellow;

  font-size: 10pt;

  text-transform: uppercase;

  position: fixed;
  width:100%;
  margin:0px;

}
.navbar li {
  display: inline-block;
  }

<nav class="navbar navbar-fixed-top" id="my-navbar">
  <div class="container">
    <div class="navbar-header">
      <ul>
        <li>nav1</li>
        <li>nav2</li>
        <li>nav2</li>
      </ul>
    </div>
  </div>
</nav>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>dsadada
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

词缀脚本不起作用

2 个答案: