我打赌你以前见过一些编码问题。
我的就是这个：https://codepen.io/fender90/pen/KqVLba
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bubbler+One">
<body data-spy="scroll" data-target="#navbar">
<!-- navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="#navbar">
<div class="navbar-header">
<a class="navbar-brand nav-link" href="#">Fabio M.</a>
</div>
<ul class="nav navbar navbar-nav">
<li><a href="#back-about-me">About Me</a></li>
<li><a href="#back-portfolio">Portfolio</a></li>
<!-- <li><a href="#">Contacts</a></li> -->
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://www.facebook.com/fabio.mancin"><i class="fa fa-facebook-official fa-lg"> Fabio's Facebook</i></a> </li>
<li><a href="https://codepen.io/fender90"><i class="fa fa-codepen fa-lg"> Fabio's CodePen</i></a></li>
</ul>
</nav>
<div class="back-about-me" id="back-about-me">
<div class="container about-me-cont">
<div class="row">
<div class="col col-xs-3 col-sm-3 col-md-3 col-lg-3 container about-me">
<img class="img-rounded center-block" src="https://scontent.xx.fbcdn.net/v/t1.0-9/10949705_10205992913732102_8367443127330721627_n.jpg?oh=e6625471e817c4da6fd65aba5f283567&oe=59E1772C" title="Fabio's face. Sexy!" alt="A picture of Fabio's face.">
</div>
<div class="col col-xs-9 col-sm-9 col-md-9 col-lg-9 text-center about-me-text container about-me">
<p style="margin: auto">27, based in Venice, Italy. Always had a passion for foreign languages and computers; decided to study foreign languages, now trying hard to learn to code. Hope to work with both in the future. This page is just a proof of concept.. for now!<br><br>I'll
add some cool stuff like "Front-End Developer" here someday :).</p>
</div>
</div>
</div>
</div>
<div class="back-portfolio" id="back-portfolio">
<div class="back-title">
<p class="text-center" id="fabio-port">FABIO'S PORTFOLIO</p>
</div>
<div class="container">
<div class="row">
<div class="col col-xs-6 col-sm-6 col-md-6 col-lg-6 col-port">
<a href="https://codepen.io/fender90/full/NgxbrP/">
<img src="https://codepen.io/fender90/pen/NgxbrP/image/small.png" alt="Preview of Fabio's first ever project. Very ugly." title="James Hetfield Tribute Page" class="center-block"></a>
<p class="port-1-p text-center"><br>This is Fabio's first ever project. It's extremely ugly, what did you expect from someone who's been into HTML for 2 days?</p>
</div>
<div class="col col-xs-6 col-sm-6 col-md-6 col-lg-6 col-port">
<a href="https://codepen.io/fender90/full/KqVLba">
<img src="https://codepen.io/fender90/pen/KqVLba/image/small.png" alt="Preview of Fabio's second project. It's the one you're on." title="Fabio's Portfolio" class="center-block"></a>
<p class="port-1-p text-center"><br>It's the page you're on. Second project, a bit better than the first one!</p>
</div>
</div>
<div class="row">
<div class="col col-xs-4 col-sm-4 col-md-4 col-lg-4 col-port">
<a href="#">
<img src="http://www.euneighbours.eu/sites/default/files/2017-01/placeholder.png" alt="Placeholder image." title="Placeholder." class="center-block placeholder"></a>
<p class="port-1-p text-center"><br>Placeholder. Who knows what's gonna appear here?</p>
</div>
<div class="col col-xs-4 col-sm-4 col-md-4 col-lg-4 col-port">
<a href="#">
<img src="http://www.euneighbours.eu/sites/default/files/2017-01/placeholder.png" alt="Placeholder image." title="Placeholder." class="center-block placeholder"></a>
<p class="port-1-p text-center"><br>Placeholder. You can bet you'll find something beautiful here!</p>
</div>
<div class="col col col-xs-4 col-sm-4 col-md-4 col-lg-4 col-port">
<a href="#">
<img src="http://www.euneighbours.eu/sites/default/files/2017-01/placeholder.png" alt="Placeholder image." title="Placeholder." class="center-block placeholder"></a>
<p class="port-1-p text-center"><br>Yet another placeholder. So much to do, so little time..</p>
</div>
</div>
<div class="row">
<div class="col col-xs-4 col-sm-4 col-md-4 col-lg-4 col-port">
<a href="#">
<img src="http://www.euneighbours.eu/sites/default/files/2017-01/placeholder.png" alt="Placeholder image." title="Placeholder." class="center-block placeholder"></a>
<p class="port-1-p text-center"><br>Guess what? It's a placeholder!</p>
</div>
<div class="col col-xs-4 col-sm-4 col-md-4 col-lg-4 col-port">
<a href="#">
<img src="http://www.euneighbours.eu/sites/default/files/2017-01/placeholder.png" alt="Placeholder image." title="Placeholder." class="center-block placeholder"></a>
<p class="port-1-p text-center"><br>I think you know the drill by now..
</p>
</div>
<div class="col col col-xs-4 col-sm-4 col-md-4 col-lg-4 col-port">
<a href="#">
<img src="http://www.euneighbours.eu/sites/default/files/2017-01/placeholder.png" alt="Placeholder image." title="Placeholder." class="center-block placeholder"></a>
<p class="port-1-p text-center"><br>Yet another placeholder. So much to do, so little time..</p>
</div>
</div>
</div>
</div>
</body>
CSS
* {
overflow: auto;
}
body {
position: relative;
height: 100%;
overflow: auto;
}
.fa, .navbar, .navbar-inverse {
overflow: hidden;
}
.row, .about-me {
display: flex;
height: 100%;
}
.navbar-inverse {
font-size: medium;
padding: 10px;
}
.navbar-right {
margin-top: -42px;
}
/** ul.nav a:hover {
color: rgb(247, 250, 255) !important;
} **/
.img-rounded {
width: 100%;
height: auto;
margin: auto;
overflow: hidden;
}
.about-me-text {
font-family: Roboto;
font-size: 1.5em;
font-weight: bold;
margin: auto;
align-content: center;
}
.back-about-me {
background-color: rgba(63, 20, 81, 0.8);
height: 100%;
padding-bottom: 30px;
}
.about-me-cont {
background-color: rgb(215, 229, 228);
border-style: solid;
padding: 10px;
height: 20em;
overflow: none;
margin-top: 30px;
}
.back-portfolio {
background-color: rgba(0, 0, 0, 0.8);
}
#fabio-port {
font-weight: bold;
font-size: 3em;
font-family: Bubbler One;
color: rgba(0, 0, 0, 0.7);
background-color: rgb(221, 210, 0);
margin: 1em;
}
.col-port {
border: solid;
width: 390px;
height: auto;
background-color: rgb(194, 202, 214);
font-weight: bold;
padding: 1em;
margin: 1em;
}
.placeholder {
height: 200px;
}
的jQuery
$(window).load(function() {
var navheight = parseFloat($(".navbar").height());
$("body").css({ "margin-top": navheight + 20 + "px" });
});
为什么滚动工作不起作用？滚动时，导航栏中的元素不会突出显示。
还尝试了
$('body').scrollspy({target: "#navbar"})
没有运气。
提前致谢！
答案 0 :(得分：1)
If you noticed the console, it says
Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4
You used the lower version of jQuery. Fix that and it will work.
In the sample below I used v3.1.1 [Go fullscreen and check ]:
$(window).load(function() {
var navheight = parseFloat($(".navbar").height());
$("body").css({
"margin-top": navheight + 20 + "px"
});
});* {
overflow: auto;
}
body {
position: relative;
height: 100%;
overflow: auto;
}
.fa,
.navbar,
.navbar-inverse {
overflow: hidden;
}
.row,
.about-me {
display: flex;
height: 100%;
}
.navbar-inverse {
font-size: medium;
padding: 10px;
}
.navbar-right {
margin-top: -42px;
}
/** ul.nav a:hover {
color: rgb(247, 250, 255) !important;
} **/
.img-rounded {
width: 100%;
height: auto;
margin: auto;
overflow: hidden;
}
.about-me-text {
font-family: Roboto;
font-size: 1.5em;
font-weight: bold;
margin: auto;
align-content: center;
}
.back-about-me {
background-color: rgba(63, 20, 81, 0.8);
height: 100%;
padding-bottom: 30px;
}
.about-me-cont {
background-color: rgb(215, 229, 228);
border-style: solid;
padding: 10px;
height: 20em;
overflow: none;
margin-top: 30px;
}
.back-portfolio {
background-color: rgba(0, 0, 0, 0.8);
}
#fabio-port {
font-weight: bold;
font-size: 3em;
font-family: Bubbler One;
color: rgba(0, 0, 0, 0.7);
background-color: rgb(221, 210, 0);
margin: 1em;
}
.col-port {
border: solid;
width: 390px;
height: auto;
background-color: rgb(194, 202, 214);
font-weight: bold;
padding: 1em;
margin: 1em;
}
.placeholder {
height: 200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bubbler+One">
<body data-spy="scroll" data-target="#navbar">
<!-- navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="navbar">
<div class="navbar-header">
<a class="navbar-brand nav-link" href="#">Fabio M.</a>
</div>
<ul class="nav navbar navbar-nav">
<li class="active"><a href="#back-about-me">About Me</a></li>
<li><a href="#back-portfolio">Portfolio</a></li>
<!-- <li><a href="#">Contacts</a></li> -->
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://www.facebook.com/fabio.mancin"><i class="fa fa-facebook-official fa-lg"> Fabio's Facebook</i></a> </li>
<li><a href="https://codepen.io/fender90"><i class="fa fa-codepen fa-lg"> Fabio's CodePen</i></a></li>
</ul>
</nav>
<div class="back-about-me" id="back-about-me">
<div class="container about-me-cont">
<div class="row">
<div class="col col-xs-3 col-sm-3 col-md-3 col-lg-3 container about-me">
<img class="img-rounded center-block" src="https://scontent.xx.fbcdn.net/v/t1.0-9/10949705_10205992913732102_8367443127330721627_n.jpg?oh=e6625471e817c4da6fd65aba5f283567&oe=59E1772C" title="Fabio's face. Sexy!" alt="A picture of Fabio's face.">
</div>
<div class="col col-xs-9 col-sm-9 col-md-9 col-lg-9 text-center about-me-text container about-me">
<p style="margin: auto">27, based in Venice, Italy. Always had a passion for foreign languages and computers; decided to study foreign languages, now trying hard to learn to code. Hope to work with both in the future. This page is just a proof of concept.. for now!<br><br>I'll
add some cool stuff like "Front-End Developer" here someday :).</p>
</div>
</div>
</div>
</div>
<div class="back-portfolio" id="back-portfolio">
<div class="back-title">
<p class="text-center" id="fabio-port">FABIO'S PORTFOLIO</p>
</div>
<div class="container">
<div class="row">
<div class="col col-xs-6 col-sm-6 col-md-6 col-lg-6 col-port">
<a href="https://codepen.io/fender90/full/NgxbrP/">
<img src="https://codepen.io/fender90/pen/NgxbrP/image/small.png" alt="Preview of Fabio's first ever project. Very ugly." title="James Hetfield Tribute Page" class="center-block"></a>
<p class="port-1-p text-center"><br>This is Fabio's first ever project. It's extremely ugly, what did you expect from someone who's been into HTML for 2 days?</p>
</div>
<div class="col col-xs-6 col-sm-6 col-md-6 col-lg-6 col-port">
<a href="https://codepen.io/fender90/full/KqVLba">
<img src="https://codepen.io/fender90/pen/KqVLba/image/small.png" alt="Preview of Fabio's second project. It's the one you're on." title="Fabio's Portfolio" class="center-block"></a>
<p class="port-1-p text-center"><br>It's the page you're on. Second project, a bit better than the first one!</p>
</div>
</div>
<div class="row">
<div class="col col-xs-4 col-sm-4 col-md-4 col-lg-4 col-port">
<a href="#">
<img src="http://www.euneighbours.eu/sites/default/files/2017-01/placeholder.png" alt="Placeholder image." title="Placeholder." class="center-block placeholder"></a>
<p class="port-1-p text-center"><br>Placeholder. Who knows what's gonna appear here?</p>
</div>
<div class="col col-xs-4 col-sm-4 col-md-4 col-lg-4 col-port">
<a href="#">
<img src="http://www.euneighbours.eu/sites/default/files/2017-01/placeholder.png" alt="Placeholder image." title="Placeholder." class="center-block placeholder"></a>
<p class="port-1-p text-center"><br>Placeholder. You can bet you'll find something beautiful here!</p>
</div>
<div class="col col col-xs-4 col-sm-4 col-md-4 col-lg-4 col-port">
<a href="#">
<img src="http://www.euneighbours.eu/sites/default/files/2017-01/placeholder.png" alt="Placeholder image." title="Placeholder." class="center-block placeholder"></a>
<p class="port-1-p text-center"><br>Yet another placeholder. So much to do, so little time..</p>
</div>
</div>
<div class="row">
<div class="col col-xs-4 col-sm-4 col-md-4 col-lg-4 col-port">
<a href="#">
<img src="http://www.euneighbours.eu/sites/default/files/2017-01/placeholder.png" alt="Placeholder image." title="Placeholder." class="center-block placeholder"></a>
<p class="port-1-p text-center"><br>Guess what? It's a placeholder!</p>
</div>
<div class="col col-xs-4 col-sm-4 col-md-4 col-lg-4 col-port">
<a href="#">
<img src="http://www.euneighbours.eu/sites/default/files/2017-01/placeholder.png" alt="Placeholder image." title="Placeholder." class="center-block placeholder"></a>
<p class="port-1-p text-center"><br>I think you know the drill by now..</p>
</div>
<div class="col col col-xs-4 col-sm-4 col-md-4 col-lg-4 col-port">
<a href="#">
<img src="http://www.euneighbours.eu/sites/default/files/2017-01/placeholder.png" alt="Placeholder image." title="Placeholder." class="center-block placeholder"></a>
<p class="port-1-p text-center"><br>Yet another placeholder. So much to do, so little time..</p>
</div>
</div>
</div>
</div>
</body>Also Correct the following line:
<nav class="navbar navbar-inverse navbar-fixed-top" id="#navbar">
to
<nav class="navbar navbar-inverse navbar-fixed-top" id="navbar">
the # should appear only in the data-target not in the actual id of the element.
答案 1 :(得分：1)
One of your major problem is, your naming convention of the CSS class and id.
Use classes (. notation) if it's not unique and will be repeated.
Use id (# notation) if it's unique.
I am guessing the problem is, the browser is having issues with not being able to identify unique id tags of the sections when it reaches them.
I will edit my response when I find the answer.
Edit: Answer has already been posted here.