greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
freeCodeCamp/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-brow...

121 lines
2.7 KiB
Markdown
Raw Normal View History

feat(challenge-md): Add initial markdown challenge files
2018-09-30 22:01:58 +00:00
---
id: 587d781e367417b2b2512acc
title: Lock an Element to the Browser Window with Fixed Positioning
challengeType: 0
videoUrl: 'https://scrimba.com/c/c2MDNUR'
fix(curriculum): Added forumTopicId to remaining 1200 challeng… (#36558)
2019-08-05 16:17:33 +00:00
forumTopicId: 301061
feat(curriculum): restore seed + solution to Chinese (#40683) * feat(tools): add seed/solution restore script * chore(curriculum): remove empty sections' markers * chore(curriculum): add seed + solution to Chinese * chore: remove old formatter * fix: update getChallenges parse translated challenges separately, without reference to the source * chore(curriculum): add dashedName to English * chore(curriculum): add dashedName to Chinese * refactor: remove unused challenge property 'name' * fix: relax dashedName requirement * fix: stray tag Remove stray `pre` tag from challenge file. Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> Co-authored-by: nhcarrigan <nhcarrigan@gmail.com>
2021-01-13 02:31:00 +00:00
dashedName: lock-an-element-to-the-browser-window-with-fixed-positioning
feat(challenge-md): Add initial markdown challenge files
2018-09-30 22:01:58 +00:00
---
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format.
2020-11-27 18:02:05 +00:00
# --description--
feat(challenge-md): Add initial markdown challenge files
2018-09-30 22:01:58 +00:00
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format.
2020-11-27 18:02:05 +00:00
The next layout scheme that CSS offers is the `fixed` position, which is a type of absolute positioning that locks an element relative to the browser window. Similar to absolute positioning, it's used with the CSS offset properties and also removes the element from the normal flow of the document. Other items no longer "realize" where it is positioned, which may require some layout adjustments elsewhere.
One key difference between the `fixed` and `absolute` positions is that an element with a fixed position won't move when the user scrolls.
# --instructions--
The navigation bar in the code is labeled with an id of `navbar`. Change its `position` to `fixed`, and offset it 0 pixels from the `top` and 0 pixels from the `left`. After you have added the code, scroll the preview window to see how the navigation stays in place.
# --hints--
The `#navbar` element should have a `position` set to `fixed`.
```js
assert($('#navbar').css('position') == 'fixed');
```
Your code should use the `top` CSS offset of 0 pixels on the `#navbar` element.
```js
assert($('#navbar').css('top') == '0px');
feat(challenge-md): Add initial markdown challenge files
2018-09-30 22:01:58 +00:00
```
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format.
2020-11-27 18:02:05 +00:00
Your code should use the `left` CSS offset of 0 pixels on the `#navbar` element.
```js
assert($('#navbar').css('left') == '0px');
```
feat(challenge-md): Add initial markdown challenge files
2018-09-30 22:01:58 +00:00
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format.
2020-11-27 18:02:05 +00:00
# --seed--
feat(challenge-md): Add initial markdown challenge files
2018-09-30 22:01:58 +00:00
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format.
2020-11-27 18:02:05 +00:00
## --seed-contents--
feat(challenge-md): Add initial markdown challenge files
2018-09-30 22:01:58 +00:00
```html
<style>
fix: fixed position challenge (#37945)
2020-01-03 00:41:36 +00:00
body {
min-height: 150vh;
}
feat(challenge-md): Add initial markdown challenge files
2018-09-30 22:01:58 +00:00
#navbar {
fix(challenge-md): Fix quotes that failed in the transform
2018-10-08 00:01:53 +00:00
feat(challenge-md): Add initial markdown challenge files
2018-09-30 22:01:58 +00:00
width: 100%;
background-color: #767676;
}
nav ul {
margin: 0px;
padding: 5px 0px 5px 30px;
}
nav li {
display: inline;
margin-right: 20px;
}
a {
text-decoration: none;
}
</style>
<body>
<header>
<h1>Welcome!</h1>
<nav id="navbar">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</header>
<p>I shift up when the #navbar is fixed to the browser window.</p>
</body>
```
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format.
2020-11-27 18:02:05 +00:00
# --solutions--
feat(challenge-md): Add initial markdown challenge files
2018-09-30 22:01:58 +00:00
fix(curriculum): Add solutions to Applied Visual Design challenges (#35815) * fix: add solutions to Applied Visual Design challenges * fix: remove extra opening style tag
2019-04-28 18:13:38 +00:00
```html
<style>
fix: fixed position challenge (#37945)
2020-01-03 00:41:36 +00:00
body {
min-height: 150vh;
}
fix(curriculum): Add solutions to Applied Visual Design challenges (#35815) * fix: add solutions to Applied Visual Design challenges * fix: remove extra opening style tag
2019-04-28 18:13:38 +00:00
#navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #767676;
}
nav ul {
margin: 0px;
padding: 5px 0px 5px 30px;
}
nav li {
display: inline;
margin-right: 20px;
}
a {
text-decoration: none;
}
</style>
<body>
<header>
<h1>Welcome!</h1>
<nav id="navbar">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</header>
<p>I shift up when the #navbar is fixed to the browser window.</p>
</body>
feat(challenge-md): Add initial markdown challenge files
2018-09-30 22:01:58 +00:00
```