当我只使用vanilla JavaScript滚动到正文中的特定部分时，我想更改nav栏中列表元素的背景。。。 我做了一个检查视口的函数，但是我很难为集合中的每个HTML元素放置侦听器。 有人能帮忙吗？
null
/* VARIABLES */
const newSectionBtn = document.getElementById("new-section");
const main = document.getElementById("main");
const backBtn = document.getElementById("back");
let allLists = document.getElementsByTagName("li");
let allSections = document.getElementsByTagName("section");
let n = 4;
/* FUNCTIONS */
function duplicate(num) {
const newSection = document.createElement("section");
const newDiv = document.createElement("div");
const heading = document.createElement("h2");
const p1 = document.createElement("p");
const p2 = document.createElement("p");
newSection.appendChild(newDiv);
newDiv.appendChild(heading);
newDiv.appendChild(p1);
newDiv.appendChild(p2);
newSection.setAttribute("id", "section" + num);
newSection.setAttribute("data-nav", "Section" + " " + num);
newDiv.setAttribute("class", "landing__container");
heading.textContent = "Section" + " " + num;
p1.textContent =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.";
p2.textContent =
"Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.";
return newSection;
}
/* THIS IS A FUNCTION TO CHECK WEATHER AN ELEMENT IS IN VIEWPORT OR NOT AND RETURNS either true or false */
function inViewPort(element) {
let bounding = element.getBoundingClientRect();
if (
bounding.top >= 0 &&
bounding.left >= 0 &&
bounding.right <= (window.innerWidth || document.documentElement.clientWidth) &&
bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight)
)
return true;
else return false;
}
/* LISTENERS */
newSectionBtn.addEventListener("click", () => {
newSectionBtn.insertAdjacentHTML("beforebegin", "<li> Section" + " " + n + "</li>");
main.appendChild(duplicate(n));
main.lastElementChild.scrollIntoView({ behavior: "smooth" });
n++;
});
backBtn.addEventListener("click", () => {
window.scrollTo({ top: 0, behavior: "smooth" });
});/*
*
* CSS written based on SMACSS architecture.
* To learn more, visit: http://smacss.com/
*
* For simplicity, no reset or normalize is added.
* To learn more, visit: https://css-tricks.com/reboot-resets-reasoning/
*
*/
/* ---- Base Rules ---- */
body {
background: rgb(136, 203, 171);
background: linear-gradient(0deg, rgba(136, 203, 171, 1) 0%, rgba(0, 13, 60, 1) 100%);
margin: 0;
font-family: "Merriweather", serif;
color: #fff;
}
/* Typeography General*/
h1 {
font-family: "Fira Sans", sans-serif;
font-size: 3em;
margin: 2em 1rem;
}
@media only screen and (min-width: 35em) {
h1 {
font-size: 7em;
margin: 2em 4rem 1em;
}
}
h2 {
border-bottom: 1px solid #cc1;
font-family: "Oxygen", Sans-Serif;
font-size: 3em;
color: #fff;
}
p {
line-height: 1.6em;
color: #eee;
}
/* ---- Layout Rules ---- */
main {
margin: 10vh 1em 10vh;
}
.main-hero {
min-height: 40vh;
padding-top: 3em;
}
section {
position: relative;
min-height: 80vh;
}
/* ---- Module Rules ---- */
/* Navigation Styles*/
.navbar__menu ul {
padding-left: 0;
margin: 0;
text-align: right;
}
.navbar__menu li {
display: inline-block;
}
.navbar__menu .menu__link {
display: block;
padding: 1em;
font-weight: bold;
text-decoration: none;
color: #000;
}
.navbar__menu .menu__link:hover {
background: #333;
color: #fff;
transition: ease 0.3s all;
}
/* Header Styles */
.page__header {
background: #fff;
position: fixed;
top: 0;
width: 100%;
z-index: 5;
}
/* Footer Styles */
.page__footer {
background: #000;
padding: 3em;
color: #fff;
}
.page__footer p {
color: #fff;
}
/* ---- Theme Rules ---- */
/* Landing Container Styles */
.landing__container {
padding: 1em;
text-align: left;
}
@media only screen and (min-width: 35em) {
.landing__container {
max-width: 50em;
padding: 4em;
}
}
section:nth-of-type(even) .landing__container {
margin-right: 0;
margin-left: auto;
text-align: right;
}
/* Background Circles */
/* Note that background circles are created with psuedo elements before and after */
/* Circles appear to be random do to use of :nth-of-type psuedo class */
section:nth-of-type(odd) .landing__container::before {
content: "";
background: rgba(255, 255, 255, 0.187);
position: absolute;
z-index: -5;
width: 20vh;
height: 20vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(even) .landing__container::before {
content: "";
background: rgb(255, 255, 255);
background: linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 100%);
position: absolute;
top: 3em;
right: 3em;
z-index: -5;
width: 10vh;
height: 10vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(3n) .landing__container::after {
content: "";
background: rgb(255, 255, 255);
background: linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 100%);
position: absolute;
right: 0;
bottom: 0;
z-index: -5;
width: 10vh;
height: 10vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(3n + 1) .landing__container::after {
content: "";
background: rgb(255, 255, 255);
background: linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 100%);
position: absolute;
right: 20vw;
bottom: -5em;
z-index: -5;
width: 15vh;
height: 15vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
/* ---- Theme State Rules ---- */
/* Section Active Styles */
/* Note: your-active-class class is applied through javascript. You should update the class here and in the index.html to what you set in your javascript file. */
section.your-active-class {
background: rgb(0, 0, 0);
background: linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
}
section.your-active-class .landing__container::before {
opacity: 1;
animation: rotate 4s linear 0s infinite forwards;
}
section.your-active-class .landing__container::after {
opacity: 1;
animation: rotate 5s linear 0s infinite forwards reverse;
}
/* Section Active Styles Keyframe Animations */
@keyframes rotate {
from {
transform: rotate(0deg) translate(-1em) rotate(0deg);
}
to {
transform: rotate(360deg) translate(-1em) rotate(-360deg);
}
}
/* MY STYLES */
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
background-color: #00c3c7;
border-radius: 8px;
position: fixed;
top: 0px;
width: 95%;
min-height: 100px;
z-index: 10000;
}
li {
padding: 10px;
list-style-type: none;
background-color: cadetblue;
border-radius: 8px;
align-self: center;
}
li:hover {
cursor: pointer;
}
.active {
background-color: darkred;
font-size: 100px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Manipulating the DOM</title>
<!-- Load Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Fira+Sans:900|Merriweather&display=swap"
rel="stylesheet"
/>
<!-- Load Styles -->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<!-- HTML Follows BEM naming conventions
IDs are only used for sections to connect menu achors to sections -->
<header class="page__header">
<nav class="navbar__menu">
<!-- Navigation starts as empty UL that will be populated with JS -->
<ul id="navbar__list"></ul>
</nav>
</header>
<main id="main">
<header class="main__hero">
<nav>
<ul class="flex-container">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li id="new-section">NEW SECTION</li>
<li id="back">BACK TO TOP</li>
</ul>
</nav>
<h1>Landing Page</h1>
</header>
<!-- Each Section has an ID (used for the anchor) and
a data attribute that will populate the li node.
Adding more sections will automatically populate nav.
The first section is set to active class by default -->
<section id="section1" data-nav="Section 1" class="your-active-class">
<div class="landing__container">
<h2>Section 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus
lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod
augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis
sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem
nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a
pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt
felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero
venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.
</p>
<p>
Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus
aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus
purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
tortor, eget elementum tortor mollis non.
</p>
</div>
</section>
<section id="section2" data-nav="Section 2">
<div class="landing__container">
<h2>Section 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus
lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod
augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis
sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem
nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a
pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt
felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero
venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.
</p>
<p>
Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus
aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus
purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
tortor, eget elementum tortor mollis non.
</p>
</div>
</section>
<section id="section3" data-nav="Section 3">
<div class="landing__container">
<h2>Section 3</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus
lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod
augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis
sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem
nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a
pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt
felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero
venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.
</p>
<p>
Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus
aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus
purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
tortor, eget elementum tortor mollis non.
</p>
</div>
</section>
</main>
<footer class="page__footer">
<p>© Udacity</p>
</footer>
<script src="/js/app.js"></script>
</body>
</htmlnull
你可以这样做:
引用读取有关IsInviewPort函数如何工作的链接。
用于我添加的每个部件，以处理多个元素。 if部分规定何时做某事。 按部就班地解释有点困难，但是如果你有问题，尽管问。
var isInViewport = function(elem) {
var distance = elem.getBoundingClientRect();
return (
distance.top >= 0 &&
distance.left >= 0 &&
distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
distance.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
// read the link on how above code works
var findMe = document.querySelectorAll('h2');
//get all h2 elements
var li = document.querySelectorAll('li');
//get all navbar elements
window.addEventListener('scroll', function(event) {
// call function on scrool event
findMe.forEach(element => {
//for each h2 element do next:
if (isInViewport(element)) {
//if its in viewport
if (element.innerHTML === "Section 1") {
//and if its section 1
li.forEach(li => {
li.style.color = 'white';})
// removes style if previously added
li[0].style.color = 'red';
//add style to nav bar list item number 1
}else if (element.innerHTML === "Section 2"){
li.forEach(li => {
li.style.color = 'white';})
li[1].style.color = 'red';
} else if(element.innerHTML === "Section 3"){
li.forEach(li => {
li.style.color = 'white';})
li[2].style.color = 'red';
}
}
});
}, false);
由于某种原因，它不能用于section或wrapping div，它可以用于内部有内容的元素。
所以你需要以H2元素为目标，并创造条件。
示例:
null
var isInViewport = function(elem) {
var distance = elem.getBoundingClientRect();
return (
distance.top >= 0 &&
distance.left >= 0 &&
distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
distance.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
var findMe = document.querySelectorAll('h2');
var li = document.querySelectorAll('li');
window.addEventListener('scroll', function(event) {
findMe.forEach(element => {
if (isInViewport(element)) {
if (element.innerHTML === "Section 1") {
li.forEach(li => {
li.style.color = 'white';
})
li[0].style.color = 'red';
} else if (element.innerHTML === "Section 2") {
li.forEach(li => {
li.style.color = 'white';
})
li[1].style.color = 'red';
} else if (element.innerHTML === "Section 3") {
li.forEach(li => {
li.style.color = 'white';
})
li[2].style.color = 'red';
}
}
});
}, false);/*
*
* CSS written based on SMACSS architecture.
* To learn more, visit: http://smacss.com/
*
* For simplicity, no reset or normalize is added.
* To learn more, visit: https://css-tricks.com/reboot-resets-reasoning/
*
*/
/* ---- Base Rules ---- */
body {
background: rgb(136, 203, 171);
background: linear-gradient(0deg, rgba(136, 203, 171, 1) 0%, rgba(0, 13, 60, 1) 100%);
margin: 0;
font-family: "Merriweather", serif;
color: #fff;
}
/* Typeography General*/
h1 {
font-family: "Fira Sans", sans-serif;
font-size: 3em;
margin: 2em 1rem;
}
@media only screen and (min-width: 35em) {
h1 {
font-size: 7em;
margin: 2em 4rem 1em;
}
}
h2 {
border-bottom: 1px solid #cc1;
font-family: "Oxygen", Sans-Serif;
font-size: 3em;
color: #fff;
}
p {
line-height: 1.6em;
color: #eee;
}
/* ---- Layout Rules ---- */
main {
margin: 10vh 1em 10vh;
}
.main-hero {
min-height: 40vh;
padding-top: 3em;
}
section {
position: relative;
min-height: 80vh;
}
/* ---- Module Rules ---- */
/* Navigation Styles*/
.navbar__menu ul {
padding-left: 0;
margin: 0;
text-align: right;
}
.navbar__menu li {
display: inline-block;
}
.navbar__menu .menu__link {
display: block;
padding: 1em;
font-weight: bold;
text-decoration: none;
color: #000;
}
.navbar__menu .menu__link:hover {
background: #333;
color: #fff;
transition: ease 0.3s all;
}
/* Header Styles */
.page__header {
background: #fff;
position: fixed;
top: 0;
width: 100%;
z-index: 5;
}
/* Footer Styles */
.page__footer {
background: #000;
padding: 3em;
color: #fff;
}
.page__footer p {
color: #fff;
}
/* ---- Theme Rules ---- */
/* Landing Container Styles */
.landing__container {
padding: 1em;
text-align: left;
}
@media only screen and (min-width: 35em) {
.landing__container {
max-width: 50em;
padding: 4em;
}
}
section:nth-of-type(even) .landing__container {
margin-right: 0;
margin-left: auto;
text-align: right;
}
/* Background Circles */
/* Note that background circles are created with psuedo elements before and after */
/* Circles appear to be random do to use of :nth-of-type psuedo class */
section:nth-of-type(odd) .landing__container::before {
content: "";
background: rgba(255, 255, 255, 0.187);
position: absolute;
z-index: -5;
width: 20vh;
height: 20vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(even) .landing__container::before {
content: "";
background: rgb(255, 255, 255);
background: linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 100%);
position: absolute;
top: 3em;
right: 3em;
z-index: -5;
width: 10vh;
height: 10vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(3n) .landing__container::after {
content: "";
background: rgb(255, 255, 255);
background: linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 100%);
position: absolute;
right: 0;
bottom: 0;
z-index: -5;
width: 10vh;
height: 10vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(3n + 1) .landing__container::after {
content: "";
background: rgb(255, 255, 255);
background: linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 100%);
position: absolute;
right: 20vw;
bottom: -5em;
z-index: -5;
width: 15vh;
height: 15vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
/* ---- Theme State Rules ---- */
/* Section Active Styles */
/* Note: your-active-class class is applied through javascript. You should update the class here and in the index.html to what you set in your javascript file. */
section.your-active-class {
background: rgb(0, 0, 0);
background: linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
}
section.your-active-class .landing__container::before {
opacity: 1;
animation: rotate 4s linear 0s infinite forwards;
}
section.your-active-class .landing__container::after {
opacity: 1;
animation: rotate 5s linear 0s infinite forwards reverse;
}
/* Section Active Styles Keyframe Animations */
@keyframes rotate {
from {
transform: rotate(0deg) translate(-1em) rotate(0deg);
}
to {
transform: rotate(360deg) translate(-1em) rotate(-360deg);
}
}
/* MY STYLES */
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
background-color: #00c3c7;
border-radius: 8px;
position: fixed;
top: 0px;
width: 95%;
min-height: 100px;
z-index: 10000;
}
li {
padding: 10px;
list-style-type: none;
background-color: cadetblue;
border-radius: 8px;
align-self: center;
}
li:hover {
cursor: pointer;
}
.active {
background-color: darkred;
font-size: 100px;
}
JavaScript:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Manipulating the DOM</title>
<!-- Load Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:900|Merriweather&display=swap" rel="stylesheet" />
<!-- Load Styles -->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<!-- HTML Follows BEM naming conventions
IDs are only used for sections to connect menu achors to sections -->
<header class="page__header">
<nav class="navbar__menu">
<!-- Navigation starts as empty UL that will be populated with JS -->
<ul id="navbar__list"></ul>
</nav>
</header>
<main id="main">
<header class="main__hero">
<nav>
<ul class="flex-container">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li id="new-section">NEW SECTION</li>
<li id="back">BACK TO TOP</li>
</ul>
</nav>
<h1>Landing Page</h1>
</header>
<!-- Each Section has an ID (used for the anchor) and
a data attribute that will populate the li node.
Adding more sections will automatically populate nav.
The first section is set to active class by default -->
<section id="section1" data-nav="Section 1" class="your-active-class">
<div class="landing__container">
<h2>Section 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed
convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor
lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.
</p>
<p>
Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
tortor, eget elementum tortor mollis non.
</p>
</div>
</section>
<section id="section2" data-nav="Section 2">
<div class="landing__container">
<h2>Section 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed
convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor
lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.
</p>
<p>
Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
tortor, eget elementum tortor mollis non.
</p>
</div>
</section>
<section id="section3" data-nav="Section 3">
<div class="landing__container">
<h2>Section 3</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed
convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor
lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.
</p>
<p>
Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
tortor, eget elementum tortor mollis non.
</p>
</div>
</section>
</main>
<footer class="page__footer">
<p>© Udacity</p>
</footer>
<script src="/js/app.js"></script>
</body>
</html>