个人中心
gpt4 book ai didi

html - 网站不滚动

转载 作者：行者123 更新时间：2023-11-28 08:44:24 25 4
gpt4 key购买 nike

我试图制作一个只有一个长页面的网站，该页面在单击导航链接后会滚动。但是，我似乎无法让网站滚动，或让导航栏固定在顶部。我正在努力实现的一个例子是: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;
}

最佳答案

.nav {position: fixed;} 无法帮助您将导航栏固定在顶部。您可以了解 jQuery 和 ScrollTo。它们可以帮助您轻松实现。

关于html - 网站不滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27673962/

25 4 0
文章推荐： ios - 将 AppLovin 与 swift xcode 6.4 集成
文章推荐： javascript - 返回浏览器时，modernizr 没有被调用
文章推荐： javascript - 获取多维数组N个元素的所有组合
文章推荐： javascript - d3 如何将图像添加到图节点的标签上？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com