Javascript 我能'；t滚动时使导航栏保持在顶部_Javascript_Html_Css_Twitter Bootstrap

Javascript 我能'；t滚动时使导航栏保持在顶部

javascript html css twitter-bootstrap

Javascript 我能'；t滚动时使导航栏保持在顶部,javascript,html,css,twitter-bootstrap,Javascript,Html,Css,Twitter Bootstrap,我是新来的，我从Udemy购买并遵循课程。也许问题是因为讲师使用了引导程序alpha 4版本，而我使用的是alpha 6 我不能只设置position:fixed页面顶部的导航栏，我的导航栏顶部有970px的边距，当我滚动时，我希望导航从顶部到底部971px，这就是问题所在。以下是导航栏的图片： index.html文件： <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/li

我是新来的，我从Udemy购买并遵循课程。也许问题是因为讲师使用了引导程序alpha 4版本，而我使用的是alpha 6

我不能只设置

position:fixed

页面顶部的导航栏，我的导航栏顶部有970px的边距，当我滚动时，我希望导航从顶部到底部971px，这就是问题所在。以下是导航栏的图片：

index.html文件：

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>First website</title>
</head>

<body>
    <section id="cover">
        <div class="container">
            <div class="row">
                <div class="col-sm-3">
                    <div class="lead wall-sticker">
                        we. <br> plant. <br> trees. <br>
                        <a href="#">
                            <button type="button" class="btn btn-success-outline my-2 my-sm-0 text-white">Learn more</button>
                        </a>
                    </div>
                </div>
                <div class="col-sm-9">
                    <h1 class="moto">For <span class="bold-green">every</span> item sold, we plant 1 tree.<br><br>Want to become a <span class="green-underline">part</span> of it?</h1>
                    <a href="#"><i class="fa fa-arrow-down"></i></a>
                </div>
            </div>
        </div>
    </section>
    <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse" id="main-nav">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
        <script src="js/main.js"></script>


第一网站
我们<植物<树

每售出一件商品，我们就种植一棵树。

想成为其中的一部分吗？

我有main.js文件，有：

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(window).scrollTop() > 970) {
      $('.navbar').addClass('navbar-fixed-top');
    }
    if ($(window).scrollTop() < 971) {
      $('.navbar').removeClass('navbar-fixed-top');
    }
  })
});

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>970）{
$（'.navbar'）.addClass（'navbar-fixed-top'）；
}
if（$（窗口）.scrollTop（）<971）{
$（'.navbar'）.removeClass（'navbar-fixed-top'）；
}
})
});

你试过使用CSS吗

要将元素粘贴到页面顶部，请执行以下操作：

位置：-webkit粘性；
位置：粘性；
排名：0
我现在就试过了，但没有帮助，谢谢你的帮助。