Question

我是新人，我从Udemy购买并关注课程。也许问题是因为讲师使用bootstrap alpha 4版本，我使用alpha 6.

我无法为页面顶部的导航栏设置postion:fixed，我的导航栏顶部有970px的边距，当我滚动想要导航时，从顶部和底部971px导航为970px，并且是问题。这是navbar的图片：

enter image description here

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');
    }
  })
});

Answer 1

您是否尝试过使用CSS粘贴？

将元素粘贴到页面顶部：

position: -webkit-sticky; position: sticky; top: 0;

滚动时我无法使导航栏顶到顶部

1 个答案: