[英]I can't making the navigation bar stick to top when scrolling
我在前面是新手，我从Udemy购买和跟随课程。 可能是因为讲师使用了bootstrap alpha 4版本，而我使用了alpha 6。
我不能只设置postion:fixed为具有页面顶部的导航栏，我的导航栏顶部具有970px的页边距，并且当我滚动时要从顶部和底部的971px导航到970px，这是有问题的。 这是导航栏的图片：
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'); } }) }); 您是否尝试过使用CSS Sticky？
将元素粘贴到页面顶部：
position: -webkit-sticky; position: sticky; top: 0;
滚动到窗口上方时如何将div /导航栏粘贴到窗口顶部
[英]How to stick a div/navigation bar to the top of the window when scrolled past it
当我向上滚动时，导航栏必须停留在最高位置，并且不要通过跟随导航栏的图像来隐藏
[英]when i am scrolling up, the navbar has to stick at top position and don't hide by following images of navbar
我如何获得一个滚动页面和导航的导航，当它使用普通的javascript到达顶部导航
[英]how do i get a navigation that scrolls with page and stick when it reaches the top nav with plain javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.