Question

我一直在为自己创建一个网站，但是遇到了问题。我在这里和W3Schools上都看到过帖子，但是我无法正常工作。我想做这样的事情：https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_scrollspy&stacked=h并将其合并到当前页面：https://jakehamblin.com

<!DOCTYPE html>
<html>
<head>
<title>Home - Jake Hamblin</title>
<link rel="icon" href="https://jakehamblin.com/images/logo.png" type="image/x-icon"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<style>
body {
	margin: 0;
	font-family: 'Roboto Condensed', sans-serif;
}

.navbar {
	height: 50px;
	width: 100%;
	position: fixed;
	background-color: none;
	line-height: 50px;
}

.navbar a {
	text-decoration: none;
	color: #000;
	margin: 0 1.5%;
	font-size: 20px;
	transition: color 1s ease, border-color 1s ease;
}

.navbar a:hover {
	color: #00aced;
	border-color: #00aced;
}

.navbar .active {
	padding: 5px;
	border: 2px solid #000;
}

.navbar span {
	color: #fff !important;
	float: right;
	margin: 0 .5%;
	font-size: 25px;
}

.background {
	width: 100%;
	height: 600px;
	background-image: url("https://jakehamblin.com/images/background3.png");
	background-attachment: fixed;
 	background-position: bottom;
  	background-repeat: no-repeat;
  	background-size: cover;
  	text-align: center;
  	display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.background span {
	font-size: 40px;
    font-weight: bold;
    font-family: 'Dancing Script', cursive;
    padding: 10px;
    border: 2px solid #fff;
    transition: color 1s ease, border-color 1s ease;
}

.background span:hover {
	color: #00aced;
	border-color: #00aced;
	cursor: pointer;
}

.background p {
	font-size: 25px;
    font-weight: lighter;
    font-family: 'Dancing Script', cursive;
    border: none !important;
}

.index {
	background-color: #DDDECE;
	width: 100%;
	padding: 120px 0;
}

.index p {
	font-size: 25px;
	padding: 0 30%;
	text-align: center;
}
</style>
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
</head>
<body>

<section class="navbar">

<a href="https://jakehamblin.com" class="active">Home</a>
<a href="https://jakehamblin.com/about">About</a>
<a href="https://jakehamblin.com/portfolio">Portfolio</a>
<a href="https://jakehamblin.com/price">Price</a>
<a href="https://jakehamblin.com/contact">Contact</a>
<span><a href="https://twitter.com/jekeltor"><i class="fab fa-twitter"></i></a></span>
<span><a href="https://github.com/jekeltor"><i class="fab fa-github"></i></a></span>
<span><a href="https://jakehamblin.com/contact"><i class="fas fa-at"></i></a></span>

</section>

<section class="background">
<div>
<span>Jake Hamblin</span><br>
<p>"You are but a human, but why type of human will you be?"</p>
</div>
</section>

<section class="index">
<div>
<p>Hello! My name is Jake, and I create <b>responsive</b> & <b>functional</b> websites for business', servers, and personal use</p>
</div>

<div class="test1">
	Test1
</div>

<div class="test2">
	Test2
</div>

<div class="test3">
	Test3
</div>
</section>

</body>
</html>

Answer 1

您可以发布代码吗？

我看到您有测试div-您想滚动到该位置吗？您需要将其从类更改为ID，以使其起作用。您的资产净值应链接到这些ID。

Bootstrap Scrollspy合并

1 个答案: