Question

在我的代码中，页面顶部有一个横幅，下方有一个导航栏。我想要做的是当我向下滚动，横幅和＆amp;导航栏就像它们应该滚动一样，但只要导航栏到达页面顶部，即使我继续滚动它也会保持在那里。关于我如何做到这一点的任何想法？

（注意：目前我只知道HTML / CSS;我还不知道Javascript，但如果Javascript是唯一的解决方案，我会尝试理解）。

HTML：

<body>
    <div id="wrapper">
        <div id="header">
        </div>
        <nav id="top_menu">
            <ul>
                <li class="current"><a href="#">HOME</a></li>
                <li><a href="#">MY PROFILE</a></li>
                <li><a href="#">THE FLEET</a>
                    <ul>
                        <li><a href="#">NISSAN</a></li>
                        <li><a href="#">TOYOTA</a></li>
                        <li><a href="#">HONDA</a></li>
                        <li><a href="#">MAZDA</a></li>
                    </ul>
                </li>
                <li><a href="#">OTHER SERVICES</a></li>
                <li><a href="#">TERMS & CONDITIONS</a></li>
                <li><a href="#">FREQUENTLY ASKED QUESTIONS</a></li>
                <li><a href="#">ABOUT US</a></li>
            </ul>
        </nav>
        <div class="content">
        </div>
        <div id="footer">© rentPRO 2015</div>        
    </div>
</body>

CSS：

<style> 

    #header {
        background-image: url("https://lh6.googleusercontent.com/-4epq8pWSUKQ/VNX4lGi_GrI/AAAAAAAAAIo/9gDg5CubDO8/w1044-h201-no/header%2Bfinal1.jpg");
        background-size: 100% 100%;
        width: 1075px;
        height: 200px;
        margin: 0 auto;
        position: relative;
    }

    #top_menu {
        display:block;
        position: fixed;
        top: 210px;
        left: 136px;
        border-radius: 4px;
        border-width: 1px 1px 1px;
        border-style:solid;
        background-color: white;
        font-family: 'Lato', sans-serif;
        font-size: 14.85px;
        height: 40px;
        width: 1075px;
        margin: 0 auto;
        border-color: #A4A4A4;
    }

</style>

Answer 1

Jolan，你们大多数代码都是正确的，但是你需要在你的代码中加入一点点Javascript，导航栏在滚动时向上滑动。希望这会有所帮助。

var header = document.querySelector("#header");

new Headroom(header, {
  tolerance: {
    down : 2,
    up : 5
  },
  offset : 100,
  classes: {
    initial: "slide",
    pinned: "slide--reset",
    unpinned: "slide--up"
  }
}).init();

Answer 2

为此你需要一些javascript。有一个与你的问题相关的样本检查Fiddle。

<强> JQuery的

$(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
        $('#scroller').css('top', $(window).scrollTop());
    }
}
);

此代码中的100个导航栏与顶部的距离。您可以根据自己的要求进行更改。

您也可以参考此链接JQuery Position:Fixed 'NAVBAR' by scrolling the page

Answer 3

我的解决方案不需要jQuery，所以尽情享受：

function scrollTop() {
  return (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop
}
var navbar = document.getElementById('navbar')
var sticky_point = 100


window.onscroll = function() {
  if (scrollTop() >= sticky_point) {
    navbar.style.position = 'fixed'
  } else if (scrollTop() < sticky_point) {
    navbar.style.position = 'static'
  }
}

body {
  margin: 0;
}

header {
  width: 100%;
  height: 100px;
  background: #2c3e50;
}

nav {
  width: 100%;
  height: 30px;
  background: #34495e;
  top: 0;
}

<header>HEADER</header>
<nav id="navbar">NAVBAR</nav>
<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque nostrum quis asperiores tempore qui iure, nam, sed ratione deleniti maxime deserunt numquam? Officiis magnam soluta maxime porro eaque, consequatur. Lorem ipsum dolor sit amet, consectetur
  adipisicing elit. Totam eaque nostrum quis asperiores tempore qui iure, nam, sed ratione deleniti maxime deserunt numquam? Officiis magnam soluta maxime porro eaque, consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque
  nostrum quis asperiores tempore qui iure, nam, sed ratione deleniti maxime deserunt numquam? Officiis magnam soluta maxime porro eaque, consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque nostrum quis asperiores tempore
  qui iure, nam, sed ratione deleniti maxime deserunt numquam? Officiis magnam soluta maxime porro eaque, consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque nostrum quis asperiores tempore qui iure, nam, sed ratione deleniti
  maxime deserunt numquam? Officiis magnam soluta maxime porro eaque, consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque nostrum quis asperiores tempore qui iure, nam, sed ratione deleniti maxime deserunt numquam? Officiis
  magnam soluta maxime porro eaque, consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque nostrum quis asperiores tempore qui iure, nam, sed ratione deleniti maxime deserunt numquam? Officiis magnam soluta maxime porro eaque,
  consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque nostrum quis asperiores tempore qui iure, nam, sed ratione deleniti maxime deserunt numquam? Officiis magnam soluta maxime porro eaque, consequatur.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

当您滚动时，Javascript会检查您在页面上的位置，如果您位于sticky_point之下，则导航栏会显示属性：position: fixed;。

如果您在网站上将此问题整合在一起，请随时向我寻求帮助。

导航栏一到达页面顶部就会保持固定状态

3 个答案: