Question

当用户向下滚动页面时，我想在视口顶部显示一个固定菜单。

我能够很容易地做到这一点：

var myMenu = document.getElementById("myMenu");
function websiteScroll() {
    console.log(window.scrollY);
    if (window.scrollY > 300) {
        myMenu.style.display = "block";
    } else {
        myMenu.style.display = "none";
    }
}

我的个人观点是，这似乎资源密集型，因为我将myMenu进行一些条件测试，并在每次用户滚动时不断应用CSS样式！有更好的方法吗？

Answer 1

为此使用 jquery 和 CSS

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script>
        $(window).on('scroll', function() {
            if ($(window).scrollTop()) {
                $('nav').addClass('navsrl');
            } else {
                $('nav').removeClass('navsrl');
            }
        })
    </script>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:700');
body {
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    padding: 10px 100px;
    box-sizing: border-box;
    transition: .5s;
}

nav.navsrl {
    background: rgba(0, 0, 0, .8);
    height: 80px;
    padding: 10px 50px;
}

nav .logo {
    float: left;
}

nav .logo img {
    height: 80px;
    transition: .5s;
}

nav.navsrl .logo img {
    height: 60px;
}

nav ul {
    float: right;
    margin: 0;
    padding: 0;
    display: flex;
}

nav ul li {
    list-style: none;
}

nav ul li a {
    line-height: 80px;
    color: #262626;
    padding: 5px 20px;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    transition: .5S;
}

nav.navsrl ul li a {
    color: #fff;
    line-height: 60px;
}

nav ul li a.active,
nav ul li a:hover {
    color: #fff;
    background: #f00;
}

section.sec1 {
    width: 100%;
    height: 100vh;
    background: url(Home1.jpg);
    background-size: cover;
}

section.sec2 {
    width: 100%;
    height: 100vh;
    background: url(Home2.jpg);
    background-size: cover;
}

section.sec3 {
    width: 100%;
    height: 100vh;
    background: url(Hom3.jpg);
    background-size: cover;
}

section.content {
    padding: 100px;
}

section.content h1 {
    margin: 0;
    padding: 0;
    font-size: 2em;
}

section.content h1 {
    margin: 20px 0 0;
    padding: 0;
    font-size: 1.2em;
}
</style>
 <!-- Nav Bar  -->
    <nav>
        <div class="logo">
            <img src="./logo.png" alt="">
        </div>
        <ul>
            <li><a href="#" class="active">Home</a></li>
            <li><a href="#">About </a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Organisation</a></li>
            <li><a href="#">Sample</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <!-- Nav Bar  -->
    <!-- Sections  -->
    <section class="sec1"></section>
    <section class="content">
        <h1>What is Lorem Ipsum?</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </section>
    <section class="sec2"></section>
    <section class="content">
        <h1>What is Lorem Ipsum?</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </section>
    <section class="sec3"></section>
    <section class="content">
        <h1>What is Lorem Ipsum?</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </section>
    <!-- Sections  -->

尝试一下并添加您的图片enter image description here

Answer 2

A good article on all basic navbar designs.

固定在顶部的菜单本质上要求固定其位置。

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
<h1>Fixed Top Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>

<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>

</body>
</html>

显示固定的菜单滚动？

2 个答案: