我已将链接的目录添加到我的网站，并且从网页顶部放置了大约600px。我希望它留在那里，直到我到达某个位置，然后滚动我。
我已经尝试将data-spy="affix"更改为data-spy="affix-top"但是当它设置为此时，一旦我滚动到页面顶部的位置，它就会在页面底部附加它自己，并且完全是切断了。
http://afeld.github.io/bootstrap-toc/
Essentialy，我想要与此相同的效果： http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_scrollspy_affix2&stacked=h
HTML
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- My CSS file -->
<link rel="stylesheet" href="css/main.css"/>
<!-- Open Sans Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<!-- Makes this page work on phones -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 bg-cover-about">
<div class="col-lg-12 nav-links-about">
<div class="col-xs-12 logo-about">
<a href="../beta/index.php">Profile</a>
<a href="../beta/work.php">Work</a>
<a class="active" href="../beta/contact.php">Contact</a>
</div>
</div>
<div class="col-xs-12 profile-about">
<h1>Here's a little bit about me.</h1>
<p> I am a designer currently working for the Boston Red Sox. I've had the privilege of working with organizations big to small and have had work featured in Boston Magazine and dailymail.co.uk.<br><br>
If you’d like to get in touch, feel free to send me a message.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 contact-form">
<h1>Send me a note.</h1>
<form name="contactForm" method="post" action="http://formspree.io/email@andrewtimosca.com">
<input type="text" name="name" placeholder='Name'><br>
<input type="text" name="email" placeholder='Email'><br>
<input type="text" name="subject" placeholder='Subject'><br>
<textarea name="message" placeholder='How can I help you?'></textarea><br>
<input class="button send" type="submit" value="Submit"/>
</form>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-xs-12 bg-footer">
<div class="col-col-lg-12 col-xs-12 underliner">
<a href="../beta/index.php" title="View Profile">Profile</a>
<a href="../beta/work.php" title="View Profile">Work</a>
<a href="../beta/contact.php" title="View Profile">Contact</a>
</div>
<div class="col-col-lg-12 col-xs-12 social">
<p>You can also find me on <a class="social" href="https://www.behance.net/andrewtimosca" title="Behance"> Behance </a> and <a class="social" href="https://dribbble.com/AndrewTimosca" title="Dribbble">Dribbble</a>.</p>
</div>
<div class="col-col-lg-12 col-xs-12 copyright">
<p>Copyright 2016 Andrew Timosca</p>
</div>
</div>
</div>
</div>
</div>
<!-- Jquery obove Bootstrap JS file -->
<script src="js/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
CSS
/* CSS */
h1 h2 h3 h4 h5 h6{
font-family: 'Open Sans', sans-serif;
}
h2 {
font-size: 18px;
margin: 0 0 15px 0;
color: #212934;
padding: 0 10px;
}
p {
font-family: 'Open Sans', sans-serif;
}
a {
text-decoration: none;
font-family: 'Open Sans', sans-serif;
}
a:active {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
ul {
margin: 0;
padding: 0
}
body {
height: 100%;
}
.bg-cover{
background: url(../images/profile.jpg)no-repeat center center;
height: 660px;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.bg-cover-about{
background: url(../images/headshot.jpg)no-repeat left center;
height: 450px;
min-height: 420px;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
border-bottom: 3px solid #bfbfbf;
}
.logo {
background: url(../images/logo.png)no-repeat left center;
background-size: 180px 38px;
padding: 50px 0px 50px 200px;
}
.logo-about {
background: url(../images/logo_red.png)no-repeat left center;
background-size: 180px 38px;
padding: 50px 0px 50px 200px;
}
.nav-links {
padding-left: 10%;
display: flex;
align-items: center; /* align vertical */
}
.nav-links-about {
padding-left: 10%;
margin-bottom: -20px;
display: flex;
align-items: center; /* align vertical */
}
.nav-links a{
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1 px;
color: rgba(255, 255, 255, 0.5);;
line-height: 34px;
transition: .2s color linear;
display: inline-block;
height: 34px;
font-weight: 600;
margin: 0px 7px 0px 7px;
list-style-type: none;
font-family: 'Open Sans', sans-serif;
}
.nav-links-about a{
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1 px;
color: #8c8c8c;
line-height: 34px;
transition: .2s color linear;
display: inline-block;
height: 34px;
font-weight: 600;
margin: 0px 7px 0px 7px;
list-style-type: none;
font-family: 'Open Sans', sans-serif;
}
.nav-links a:hover {
color: white;
}
.nav-links-about a:hover {
color: #262626;
}
.nav-links a.active {
color: white;
}
.nav-links-about a.active {
color: #262626;
}
.nav-links a.active:Hover {
color: white;
}
.nav-links-about a.active:Hover {
color: #262626;
}
.profile {
margin: 70px 0 20px 0px;
font-family: 'Open Sans', sans-serif;
color: rgba(255, 255, 255, 1)
}
.profile h1 {
font-size: 46px;
font-weight: 600;
margin: 0px 0 30px 0px;
font-family: 'Open Sans', sans-serif;
line-height: 50px;
text-align: center;
}
.profile p {
font-size: 17px;
font-weight: 400;
font-family: 'Open Sans', sans-serif;
line-height: 1.7em;
max-width: 600px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.profile-about {
margin: 70px 0 20px 0px;
padding-left: 10%;
font-family: 'Open Sans', sans-serif;
color: #262626;
}
.profile-about h1 {
font-size: 44px;
font-weight: 600;
margin: 0 0 10px -3px;
font-family: 'Open Sans', sans-serif;
line-height: 50px;
text-align: left;
}
.profile-about p {
font-size: 17px;
font-weight: 400;
font-family: 'Open Sans', sans-serif;
line-height: 1.7em;
max-width: 600px;
text-align: left;
color: #666666;
}
.bg-services {
min-height: 43vh;
height:auto;
height:auto !important; /* for IE as it does not support min-height */
height:43vh;
background-size:cover;
padding: 30px 0 30px 0;
}
.service {
text-align: center;
padding-top: 190px;
margin-top: 40px;
background-repeat: no-repeat;
background-position: center top;
}
.service p {
margin: 0 0 20px 0;
font-size: 15px;
font-weight: 300;
color: rgba(33, 41, 52, .6);
line-height: 1.6em;
padding: 0 40px;
margin: auto;
}
.service.web {
background-image: url(../images/web-design.png);
}
.service.mobile {
background-image: url(../images/mobile-design.png);
}
.service.dev {
background-image: url(../images/development.png);
}
.bg-viewWork{
height: 15vh;
background-color:rgba(232, 232, 232, .3);
background-size:cover;
text-align: center;
display: flex;
align-items: center;
justify-content: center
}
.contact-form {
padding: 0 0 20px 10%;
min-height: 43vh;
height:auto;
height:auto !important;
}
.contact-form h1{
font-size: 28px;
font-weight: 600;
}
.bg-footer{
height: 200px;
background-color: #262626;
background-size:cover;
color: #ffffff;
text-align: center;
}
.underliner a{
text-transform: uppercase;
font-size: 13px;
letter-spacing: 2px;
color: rgba(255,255,255,1.0);
line-height: 34px;
transition: .2s color linear;
display: inline-block;
height: 34px;
font-weight: 400;
margin: 30px 5px 10px 5px;
list-style-type: none;
}
.underliner a.active,
.underliner a:hover {
}
.social {
margin-top: 0px;
}
.social p{
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
color: rgba(255,255,255, .4);
font-weight: 400;
margin: 0 5% 0 5%;
}
.social a{
text-transform: uppercase;
font-size: 12px;
letter-spacing: 2px;
color: rgba(255,255,255, .4);
transition: .2s color linear;
font-weight: 400;
}
.social a.active,
.social a:hover {
color: rgba(255,255,255, .8);
}
.copyright p{
font-size: 11px;
letter-spacing: 1px;
color: rgba(255,255,255, .4);
font-weight: 400;
margin: 75px 0px 0px 0px;
}
.project-type {
background-color: blue;
height:auto;
}
#project1,
#project2,
#project3,
#project4,
#project5,
#project6,
#project7,
#project8,
#project9 {
height: 1000px;
background-color: yellow;
width: 90%;
}
nav[data-toggle='toc'] {
margin-top: 30px;
}
/* Buttons */
.button {
border-radius: 60px;
font-size: 20px;
line-height: 46px;
padding: 0 10px;
display: inline-block;
cursor: pointer;
position: relative;
transition: .2s all linear;
margin: 0 10px;
}
.button.red {
border: 2px solid #981b1e;
color: #981b1e;
background: rgba(232, 232, 232, .3);
}
.button.red:hover {
color: #981b1e;
border-color: #bfbfbf;
}
.button.send {
border: 2px solid #981b1e;
color: #981b1e;
background: rgba(255, 255, 255, 1.0);
}
.button.send:hover {
color: #981b1e;
border-color: #bfbfbf;
}
/* Form */
input {
width: 50%;
margin: 20px 0 15px 0;
}
input[type=text] {
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
input[placeholder] {
font-size: 17px;
font-weight: 400;
font-family: 'Open Sans', sans-serif;
line-height: 1.7em;
text-align: left;
}
input[type=submit] {
width:100px;
margin: 20px 0 0 0;
}
input:focus {
outline: none;
}
textarea {
width: 50%;
box-sizing: border-box;
border: 0px;
border: 1px solid rgba(0, 0, 0, 0.1);
resize: none;
outline: none;
resize:none;
overflow:hidden;
height: 10em;
margin: 20px 0 15px 0;
}
textarea[placeholder] {
font-size: 17px;
font-weight: 400;
font-family: 'Open Sans', sans-serif;
line-height: 1.7em;
text-align: left;
}
/* Media Queries */
@media only screen and (-moz-min-device-pixel-ratio:1.5), only screen and (-o-min-device-pixel-ratio:3/2), only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-devicepixel-ratio:1.5), only screen and (min-resolution:1.5dppx) {
.logo {
background-image: url(../images/logo@2x.png);
}
.logo-about {
background-image: url(../images/logo_red@2x.png);
}
.service {
background-size: 250px 164px;
}
.service.web {
background-image: url(../images/web-design@2x.png);
}
.service.mobile {
background-image: url(../images/mobile-design@2x.png);
}
.service.dev {
background-image: url(../images/development@2x.png);
}
}
@media only screen and (max-width:993px) {
.service {
float: none;
margin:0 30px 50px 50px;
background-position: left center;
padding: 70px 125px 70px 250px;
text-align: left;
}
}
@media only screen and (max-width:750px) {
.bg-cover {
height: 540px;
background: -webkit-linear-gradient(top, transparent 0, rgba(0, 0, 0, .5) 100%), url(../images/profile.jpg)no-repeat center center;
background: -moz-linear-gradient(top, transparent 0, rgba(0, 0, 0, .5) 100%), url(../images/profile.jpg)no-repeat center center;
background: -ms-linear-gradient(top, transparent 0, rgba(0, 0, 0, .5) 100%), url(../images/profile.jpg)no-repeat center center;
background: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .45) 100%), url(../images/profile.jpg)no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.bg-cover-about {
height: 540px;
background: -webkit-linear-gradient(top, transparent 0, rgba(0, 0, 0, .5) 100%), url(../images/headshot.jpg)no-repeat left center;
background: -moz-linear-gradient(top, transparent 0, rgba(0, 0, 0, .5) 100%), url(../images/headshot.jpg)no-repeat left center;
background: -ms-linear-gradient(top, transparent 0, rgba(0, 0, 0, .5) 100%), url(../images/headshot.jpg)no-repeat left center;
background: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .45) 100%), url(../images/headshot.jpg)no-repeat left center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.service {
text-align: center;
background-position: center top;
float: none;
margin:0 0px 10px 0px;
padding: 200px 30px 20px 30px;
}
.service p {
padding-left: 10px;
padding-right: 10px;
}
.profile-about {
padding: 0 0 0 0;
}
.profile h1 {
margin: 0 0% 10px 0%;
text-align: center;
}
.profile-about h1 {
margin: 0 0% 10px 0%;
text-align: center;
}
.profile p{
margin: 0 10% 0 10%;
text-align: center;
}
.profile-about p{
margin: 0 10% 0 10%;
text-align: center;
}
.nav-links {
padding: 0px 0px 0px 0px;
}
.nav-links-about {
padding: 0px 0px 0px 0;
}
.contact-form {
padding: 0 5% 20px 5%;
text-align: center;
align-items: center;
justify-content: center
}
input {
width: 100%;
}
input[type=submit] {
width:100px;
}
textarea {
width: 100%;
}
@media only screen and (max-width:480px) {
.bg-cover {
height: 325px;
}
.bg-cover-about {
height: 325px;
}
.bg-cover-about {
height: 325px;
}
.profile {
margin: 15px 0 40px 0px;
}
.profile-about {
margin: 15px 0 40px 0px;
}
.profile h1 {
margin: 0 0% 10px 0%;
text-align: center;
font-size: 22px;
line-height: 35px;
}
.profile-about h1 {
margin: 0 0% 10px 0%;
text-align: center;
font-size: 28px;
line-height: 35px;
}
.profile p{
margin: 0 1% 0px 1%;
text-align: center;
font-size: 13px;
line-height: 25px;
}
.profile-about p{
margin: 0 2% 0px 2%;
text-align: center;
font-size: 13px;
line-height: 25px;
padding: ;
}
.logo {
background: url(../images/logo.png)no-repeat top center center;
background-position: top center;
background-size: 180px 38px;
padding: 10px 0 0 0;
margin: 20px 0 0 0;
}
.logo-about {
background: url(../images/logo-red.png)no-repeat top center center;
background-position: top center;
background-size: 180px 38px;
padding: 10px 0px 0px 0px;
margin: 20px 0 0 0;
}
.nav-links {
margin: 0px 0px 0px 0px;
text-align: center;
}
.nav-links-about {
margin: 0px 5% 0px 5%;
text-align: center;
}
.nav-links a{
margin: 40px 3% 0px 3%;
}
.nav-links-about a{
margin: 40px 3% 0px 3%;
}
.contact-form h1{
font-size: 22px;
font-weight: 600;
}
.bg-footer{
height: 225px;
}
.copyright p{
margin: 50px 0px 0px 0px;
}
.button {
font-size: 1em;
}
.button.send{
font-size: 1.5em;
}
}