Question

编辑：基本上是工作代码

我的目标是将我的徽标放在我网站的导航栏上方，但是当我向下滚动时，徽标应该会消失，导航栏应该保持固定在顶部。

示例网站有：w3schools

我根据教程here实现了一个返回按钮，以查看js是否有效。这是我的代码：jsfiddle。我已经从后面的例子中修改了js，但它没有用。

在此代码段中，我收到了一条我不知道的错误，但是相同的js在＆＃34; go up up按钮＆＃34;示例

＆＃13;

var amountScrolled = 100;
var navbar = document.getElementById('navbar-eff');

$(window).scroll(function() {
    if ( $(window).scrollTop() > amountScrolled ) {
        navbar.style.position = "fixed";
    } else {
        navbar.style.position = "relative";
    }
});

＆＃13;

ul.navbar {
        position: relative
        z-index:99999;
        top:0;
        width: 100%;
        list-style-type: none;
        margin: 0;
        overflow: hidden;
        background-color: #333;
        font-size: 100%;
        padding: 0 0 0 0;
}
ul.navbar li {
  float:left;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

ul.navbar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 0.25em 0.25em;
  text-decoration: none;
  border-bottom: none;
  padding-left: 0;
}

＆＃13;

<div id="wrapper">
  <div id="logo">
  <h1>
  my logo
  </h1>
  </div>
  <ul class="navbar" id="navbar-eff" style="">
      <li> <a href="index.html">Home</a></li>
      <li> <a href="hello_world">Hello World</a></li>
      <li> <a href="about_me">About Me</a></li>  
  </ul>
</div>
<header>
<p> Lorem <br>ipsum <br>dolor<br> sit<br> amet<br>, consectetur<br> adipiscing<br> elit,<br> sed<br> do<br> eiusmod <br>tempor<br> incididunt<br> ut<br> labore<br> et<br> dolore<br> magna<br> aliqua<br>. Ut<br> enim<br> ad<br> minim<br> veniam,<br> quis <br>nostrud<br> exercitation<br> ullamco<br> laboris<br> nisi<br> ut<br> aliquip<br> ex<br> 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>
  
</header>

＆＃13;

JavaScript编辑CSS样式位置值

0 个答案: