Question

我一直在尝试创建一个从页面底部开始的导航栏，然后当用户滚动时，它会在一段时间内粘到顶部，但收效甚微。这个想法类似于This website (http://grovemade.com)

请有人协助或指出我正确的方向，以达到这个目的所需的html和CSS吗？

如果您查看my website，则使用下面提供的代码示例实现了第二个导航栏。只需要修改哪些值来修改导航栏粘贴到页面顶部的位置和时间

非常感谢所有帮助，谢谢。约什

Answer 1

它被称为 Sticky Nav 。你想要这样的东西吗？

$(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>

从页面底部粘贴导航栏

1 个答案: