Question

我的问题是如何使用JQuery使我的NavBar下载页面？

我的代码：

    <!doctype html>
<html lang=''>
    <head>
       <link rel="stylesheet" href="navBar.css">
       <title>NavBAR</title>
    </head>
<body>

<div class='cssmenu'>
    <ul>
       <li class='active'><a href='#'><span>Home</span></a></li>
       <li><a href='#'><span>Products</span></a></li>
       <li><a href='#'><span>Company</span></a></li>
       <li class='last'><a href='#'><span>Contact</span></a></li>
    </ul>
</div>
<h1 style="font-size:30000%;">SomeText</h1>

</body>
<html>

如果您需要了解更多信息而不是告诉我，因为我只是初学者！

Answer 1

你可以使用jquery和css来完成它。

如果你想使用jquery，你应该使用窗口的滚动事件

＆＃13;

$(window).on('scroll', function () {
  $(".cssmenu").css("top", $(window).scrollTop() + 50);
});

＆＃13;

.cssmenu {
  position: absolute;
  left: 0px;
  transition: all 0.5s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class='cssmenu'>
    <ul>
       <li class='active'><a href='#'><span>Home</span></a></li>
       <li><a href='#'><span>Products</span></a></li>
       <li><a href='#'><span>Company</span></a></li>
       <li class='last'><a href='#'><span>Contact</span></a></li>
    </ul>
</div>
<h1 style="font-size:300px;">SomeText</h1>

＆＃13;

但是如果你想使用css，你应该设置它的位置固定。

＆＃13;

.cssmenu {
  position: fixed;
  left: 0px;
  top : 10px;
  background-color: Gray;
}

＆＃13;

<div class='cssmenu'>
    <ul>
       <li class='active'><a href='#'><span>Home</span></a></li>
       <li><a href='#'><span>Products</span></a></li>
       <li><a href='#'><span>Company</span></a></li>
       <li class='last'><a href='#'><span>Contact</span></a></li>
    </ul>
</div>
<h1 style="font-size:300px;">SomeText</h1>

＆＃13;

NavBar向下滚动页面

1 个答案: