Question

我试图创建一个只有一个长页面的网站，一旦点击导航链接就会滚动。但是，我似乎无法让网站滚动，或让导航栏保持固定在顶部。我试图实现的一个例子是：studio89.org

HTML：

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta name="description" content="Youth Volunteering Organization">
    <meta name="author" content="Vibhas Vatve">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Youth | Society</title>

    <! -- BOOTSTRAP LINKS -- >
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="bootstrap/css/styles.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Raleway:200' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>


    <! -- Mobile META tags -- >

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


    <! -- CSS FILE -- >

    <link rel="stylesheet" href="no.css">

</head>



<header>

  <div class="nav">

      <ul class="first">
          <li><a href="#intro" class="smoothScroll">Home</a></li>
          <li><a href="#about" class="smoothScroll">Team</a></li>
      </ul>
      <ul class="second">
          <li><a href="#event" class="smoothScroll">Event</a></li>
          <li><a href="#contact" class="smoothScroll">Contact</a></li>
      </ul>

  </div>
</header>

<body>



<div class="container">
            <div class="row">
                <div class="who">
                     <h2>Who Are We?</h2>

                    <p>YES is an organization founded by youth for youth to help make a positive change within society. By supporting a large variety of organizations both big and small within the community, youth not only get the opportunity to explore their interests, but are able to gain a voice in society. If you are interested, our weekly meetings will begin in 2015.</p>
                </div>
            </div>
            <div class="row">
                <div class="why">
                     <h2>Why YES?</h2>

                    <p>We strive to provide youth (anywhere within Peel) with new experiences, help youth explore their interests, provide opportunities for them to socialize with other youth and provide them with activities to do which will help them in gaining volunteer hours. We will most likely have weekly meetings where we will discuss issues regarding a specific topic, which will be different every month! We will work together to create awareness about these topics by doing activities related to the topic and fundraising for an organization that supports or represents the topic. YES is a great way to gain your 40 hours and get exposure to many amazing organizations and activities!</p>
                </div>
            </div>





</body>



    <footer>
                <div class="navbar navbar-default navbar-custom navbar-fixed-bottom">
                    <div class="copy">
                        <img src=img/facebook.png>
                        <img src="img/twitter-wrap.png">
                        <p>&copy;Youth Engagement in Society. All Rights Reserved</p>
                    </div>

CSS：

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
  /* vertical-align: baseline;*/
   background: transparent;
}

body {
    background-color: #262626;
}


/*  NAVIGATION  */

header {
    background-color: rgba(132,132,132,0.5);
    overflow: hidden;


}


.nav li {
    text-align: center;
    display: inline;
    padding:60px;

}

.nav {
    background-color: rgba(132,132,132,0.5);
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 40px;    
    position: fixed;
}

.nav a {
    text-decoration: none;
    color:black;
}

.nav ul {
    padding:166px;
    display: inline;

}

/*  FOOTER  */

footer img {
    height:50px;
    width: 50px;
}




footer {
    margin-top: 550px;
    clear: both;


}

footer p {
    color: black;
    padding-left: 100px;
}

@media all and (max-width: 580px) {
    footer p {
        padding-left:0px;
    }
}

@media all and (max-width: 480px) {
    footer p {
        padding-left:0px;
        font-size: 10px;
    }
}

.copy {
         background-color: #464646;
}

.copy p {
    display: inline;
}

Answer 1

.nav {position：fixed;}无法帮助您修复顶部的导航栏。您可以了解jQuery和ScrollTo。它们可以帮助您轻松实现。

Answer 2

将此添加到您的css样式：

body，html {overflow：scroll！important}

.nav {position：fixed; top：0px; left：0px; width：100％}

网站不滚动

2 个答案: