<分区>
我一直在尝试创建一个从页面底部开始的导航栏，然后当用户滚动时它会一直停留在顶部，但收效甚微。这个想法类似于 This website (http://grovemade.com)
请有人协助或指出正确的方向，以了解实现此目标需要哪些 html 和 css？
如果你看一下my website第二个导航栏已使用下面提供的代码示例实现。就是需要修改哪些值，修改导航栏在什么地方，什么时候粘在页面顶部
非常感谢所有帮助，谢谢。乔希
最佳答案
它被称为粘性导航。你想要这样的东西吗？
$(function () {
ht = $("h3").offset().top;
$(window).scroll(function () {
console.log($(window).scrollTop() > ht);
if ($(window).scrollTop() > ht)
$("h3").addClass("fixed");
else
$("h3").removeClass("fixed");
});
});* {margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI';}
p, h3 {margin-bottom: 10px; line-height: 1.5;}
h3 {text-align: center; border: 1px solid #ccc; border-width: 1px 0;}
h3.fixed {position: fixed; top: 0; left: 0; background-color: #fff; right: 0;}<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe dolore explicabo quo possimus accusantium doloremque necessitatibus pariatur, natus numquam beatae, dignissimos quisquam illum voluptas eos et velit, consequuntur eligendi totam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum iusto nemo nisi eum necessitatibus, eaque ratione tempora fuga! Molestias repellendus modi nostrum obcaecati, dignissimos, odit! Culpa voluptatem iste, illo totam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nostrum ratione unde et non minima animi, cum ut vero, voluptatem quia facere facilis libero nobis eaque ab pariatur recusandae commodi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus aperiam officia corporis, modi ea. Non voluptatum, molestiae in soluta a ipsa iusto aut. Alias possimus praesentium architecto aperiam, porro maxime.</p>
<h3>This would become fixed soon!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe dolore explicabo quo possimus accusantium doloremque necessitatibus pariatur, natus numquam beatae, dignissimos quisquam illum voluptas eos et velit, consequuntur eligendi totam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum iusto nemo nisi eum necessitatibus, eaque ratione tempora fuga! Molestias repellendus modi nostrum obcaecati, dignissimos, odit! Culpa voluptatem iste, illo totam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nostrum ratione unde et non minima animi, cum ut vero, voluptatem quia facere facilis libero nobis eaque ab pariatur recusandae commodi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus aperiam officia corporis, modi ea. Non voluptatum, molestiae in soluta a ipsa iusto aut. Alias possimus praesentium architecto aperiam, porro maxime.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe dolore explicabo quo possimus accusantium doloremque necessitatibus pariatur, natus numquam beatae, dignissimos quisquam illum voluptas eos et velit, consequuntur eligendi totam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum iusto nemo nisi eum necessitatibus, eaque ratione tempora fuga! Molestias repellendus modi nostrum obcaecati, dignissimos, odit! Culpa voluptatem iste, illo totam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nostrum ratione unde et non minima animi, cum ut vero, voluptatem quia facere facilis libero nobis eaque ab pariatur recusandae commodi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus aperiam officia corporis, modi ea. Non voluptatum, molestiae in soluta a ipsa iusto aut. Alias possimus praesentium architecto aperiam, porro maxime.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe dolore explicabo quo possimus accusantium doloremque necessitatibus pariatur, natus numquam beatae, dignissimos quisquam illum voluptas eos et velit, consequuntur eligendi totam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum iusto nemo nisi eum necessitatibus, eaque ratione tempora fuga! Molestias repellendus modi nostrum obcaecati, dignissimos, odit! Culpa voluptatem iste, illo totam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nostrum ratione unde et non minima animi, cum ut vero, voluptatem quia facere facilis libero nobis eaque ab pariatur recusandae commodi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus aperiam officia corporis, modi ea. Non voluptatum, molestiae in soluta a ipsa iusto aut. Alias possimus praesentium architecto aperiam, porro maxime.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe dolore explicabo quo possimus accusantium doloremque necessitatibus pariatur, natus numquam beatae, dignissimos quisquam illum voluptas eos et velit, consequuntur eligendi totam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum iusto nemo nisi eum necessitatibus, eaque ratione tempora fuga! Molestias repellendus modi nostrum obcaecati, dignissimos, odit! Culpa voluptatem iste, illo totam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nostrum ratione unde et non minima animi, cum ut vero, voluptatem quia facere facilis libero nobis eaque ab pariatur recusandae commodi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus aperiam officia corporis, modi ea. Non voluptatum, molestiae in soluta a ipsa iusto aut. Alias possimus praesentium architecto aperiam, porro maxime.</p>
</body>
</html>关于jquery - 页面底部的粘性导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35269714/