粘贴从页面底部的导航栏 [英] Sticky Navigation bar from the bottom of the page
本文介绍了粘贴从页面底部的导航栏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直在尝试创建一个导航栏，从页面底部开始，然后当用户滚动它时，它坚持到顶部有一段时间，现在很少成功。这个想法类似于此网站（http://grovemade.com）
I've been trying to create a navigation bar that begins at the bottom of the page and then as the user scrolls it sticks to the top for sometime now with very little success. The idea is something similar to This website (http://grovemade.com)
有人可以帮助或指出我正确的方向，需要什么html和css来实现这一点？
Please could someone assist or point me in the right direction as to what html and css is required to achieve this?
如果你看看< a href =http://test.engrazzle.com =nofollow>我的网站第二个导航栏已使用下面提供的代码示例实现。只是需要修改哪些值才能修改导航栏在页面顶部的位置和位置。
If you take a look at my website the second navigation bar has been implemented using the code example provided below. It is just which values need to be modified to modify where and when the navigation bar sticks to the top of the page
所有帮助都非常感谢，谢谢。 Josh
All help is greatly appreciated, thank you. Josh
推荐答案
它被称为粘性导航。你想要这样吗？
It is called Sticky Nav. Do you want something like this?
$(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>
这篇关于粘贴从页面底部的导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
