make div appear over another div on scroll

make div appear over another div on scroll - javascript

Firstly I'm sorry, there's probably quite an easy way to do this but I'm an amateur with javascript, etc. which I expect you need. Here's what i want to do:
I have a basic 'parallax' website (something along the lines of this) but I'd like to add a footer which covers half of the bottom slide when you scroll down to it, with the content in the bottom slide staying put.
As in at the moment, the content in the fifth slide moves when you scroll down to the footer, but I want it to stop at the fifth slide, with the footer sliding over the top.
Any help will be greatly appreciated!
Sorry: here's the Lorem ipsumed code:
//I have no idea what javascript i should be using.
* {
margin: 0;
padding: 0;
min-height: 15px;
}
.page {
height: 100vh;
position: relative;
}
.page-title {
font-family: 'Quattrocento Sans';
font-size: 2.5em;
transform: translateY(100%);
margin-left: 50px;
margin-right: 50px;
}
.page-sub {
font-family: 'Coming Soon';
font-size: 1.5em;
text-align: center;
margin: 50px;
}
.page-para {
font-family: 'Quattrocento Sans';
font-size: 1.2em;
line-height: 1.5;
margin-top: 50px;
margin-bottom: 50px;
margin-right: 50px;
margin-left: 50%;
position: relative;
}
.page-link {
text-decoration: none;
color: #F0C808;
}
.page-link:hover {
color: #F0C808;
font-weight: bold;
}
.link-box {
color: #F0C808;
background-color: #07A0C3;
border: 1px solid #07A0C3;
font-family: 'Coming Soon';
font-size: 1.5em;
text-align: center;
height: 3em;
width: 8em;
line-height: 3em;
bottom: 100px;
right: 150px;
position: absolute;
}
#page-one {
background: url('img/page-one.jpg') no-repeat fixed;
background-size: 100%;
}
.main-title {
font-family: 'Quattrocento Sans';
font-size: 3em;
text-align: center;
padding: auto;
align-items: center;
width: 35%;
margin-left: auto;
margin-right: auto;
position: relative;
top: 50%;
transform: translateY(-100%);
}
#page-two {
background: url(img/page-two.png) no-repeat;
background-size: 100%;
background-color: #E2E2E2;
}
#page-three {
background: url(img/page-three.jpg) no-repeat fixed;
background-size: 100%;
}
#page-four {
background: url(img/page-four.jpg) no-repeat;
background-size: 100%;
background-color: #E2E2E2;
}
#page-five {
background: url(img/page-five.jpg) no-repeat fixed;
background-size: 100%;
}
.page-five-para {
margin: 0;
}
.page-five-bold {
font-family: 'Coming Soon';
font-size: 1.2em;
margin: 0;
}
#footer {
background-color: #E2E2E2;
}
.foot {
margin: 0;
display: inline-block;
vertical-align: top;
width: 33%;
height: 50vh;
}
h5 {
font-family: 'Coming Soon';
font-size: 1.5em;
margin: 15px;
padding-left: 15px;
}
.right-foot-spacer {
height: 2.41em;
margin: 15px;
padding-left: 15px;
}
.foot-content {
font-family: 'Quattrocento Sans';
font-size: 1.2em;
margin: 20px;
}
.foot-list {
list-style: none;
}
.foot-link {
color: black;
text-decoration: none;
}
blockquote {
margin: 0px;
margin-bottom: 15px;
}
.right-footer p {
text-align: right;
}
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Quattrocento+Sans|Coming+Soon' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="page" id="page-one">
<h1 class="main-title">Title</h1>
</div>
<div class="page" id="page-two">
<h2 class="page-title">Page two title</h2>
<h4 class="page-sub">subtitle</h4>
<p class="page-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida. Phasellus bibendum leo ut tortor semper, vitae euismod arcu mattis. Proin sagittis risus sollicitudin eros finibus, et semper ex varius. In nec sagittis
metus. Aliquam in sem eu diam pretium vulputate. Sed pretium ante id sem posuere mollis. Suspendisse sed massa purus. Donec et nulla rhoncus, gravida lectus ac, pretium quam.</p>
</div>
<div class="page" id="page-three">
<h2 class="page-title">Page three title</h2>
<h4 class="page-sub">subtitle</h4>
<p class="page-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida. Phasellus bibendum leo ut tortor semper, vitae euismod arcu mattis. Proin sagittis risus sollicitudin eros finibus, et semper ex varius. In nec sagittis
metus. Aliquam in sem eu diam pretium vulputate. Sed pretium ante id sem posuere mollis. Suspendisse sed massa purus. Donec et nulla rhoncus, gravida lectus ac, pretium quam.</p>
<a href="http://www.google.com" class="page-link">
<div class="link-box">Link</div>
</a>
</div>
<div class="page" id="page-four">
<h2 class="page-title">Page title</h2>
<h4 class="page-sub">subtitle</h4>
<p class="page-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida. Phasellus bibendum leo ut tortor semper, vitae euismod arcu mattis. Proin sagittis risus sollicitudin eros finibus, et semper ex varius. In nec sagittis
metus. Aliquam in sem eu diam pretium vulputate. Sed pretium ante id sem posuere mollis. Suspendisse sed massa purus. Donec et nulla rhoncus, gravida lectus ac, pretium quam.</p>
<a href="http://www.bing.com" class="page-link">
<div class="link-box">Link</div>
</a>
</div>
<div class="page page-five" id="page-five">
<h2 class="page-title">Page title</h2>
<h4 class="page-sub">Lorem ipsum dolor</h4>
<div class="page-para">
<p class="page-five-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida.</p>
<h6 class="page-five-bold">Lorem ipsum dolor</h6>
<p class="page-five-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div id="footer">
<div class="foot left-footer">
<h5>Lorem Ipsum</h5>
<p class="foot-content email">someone#example.com</p>
</div>
<div class="foot center-footer">
<h5>Footer</h5>
<ul class="foot-content">
<li class="foot-list">Google
</li>
<li class="foot-list">Bing
</li>
<li class="foot-list">Yahoo
</li>
</ul>
</div>
<div class="foot right-footer">
<div class="right-foot-spacer"></div>
<div class="foot-content quote">
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>
<p>-Lorem Ipsum</p>
</div>
</div>
</div>
</body>
</html>

If I've understood your question correctly, one way to achieve the effect you are looking for is by monitoring the getBoundingClientRect().top property of the final <div> and the getBoundingClientRect().bottom property of the penultimate <div>.
When the getBoundingClientRect().top property of the final <div> hits the top of the viewport, you can change the element's style rules to fix it in that position;
When the getBoundingClientRect().bottom property of the penultimate <div> comes back into view at the top of the viewport, you can unfix the final <div> so that it starts scrolling as normal again.
Example:
function fixPage5() {
var footer = document.getElementsByTagName('footer')[0];
var pages = document.getElementsByClassName('page');
if (pages[(pages.length - 1)].getBoundingClientRect().top < 1) {
pages[(pages.length - 1)].classList.add('fixed');
footer.style.marginTop = '424px';
}
if (pages[(pages.length - 2)].getBoundingClientRect().bottom > -1) {
footer.style.marginTop = '0';
pages[(pages.length - 1)].classList.remove('fixed');
}
}
window.addEventListener('scroll',fixPage5,false);
body {
margin: 0;
padding: 0;
}
.page {
position: relative;
width: 100%;
height: 400px;
padding: 12px;
font-size: 72px;
}
footer {
position: relative;
width: 100%;
z-index: 12;
height: 400px;
font-size: 72px;
color: rgb(255,255,255);
background-color: rgb(31,31,31);
}
.page:nth-of-type(odd) {
color: rgb(255,255,255);
background-color: rgb(127,127,127);
}
.fixed {
position: fixed;
top: 0;
left: 0;
z-index: -12;
}
<div class="page">Page One</div>
<div class="page">Page Two</div>
<div class="page">Page Three</div>
<div class="page">Page Four</div>
<div class="page">Page Five</div>
<footer>Footer</footer>

Related

HTML CSS JS formatting of display: none

Initially, my id="Gabel" display was shown on my page with the correct format but when input display: none; my formatting was distorted. Is there anything wrong with my code? I want to show display id="Gabel" when I click the image on the main page. Here are some of the codes. My problem lies in the formatting of my card with an id of Gabel. Thank you
#Gabel {
background-color: #fff;
position: relative;
display: flex;
border-radius: 20px;
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.356);
padding: 0;
top: 300px;
/* display: none; */
width: 80%;
}
.container_Gabel img {
width: auto;
height: 100%;
border-radius: 5px 0 0 5px;
}
.container_Gabel .btn {
position: absolute;
bottom: -20px;
right: -20px;
border: none;
outline: none;
display: flex;
align-items: center;
background-color: #fc9400;
color: #fff;
padding: 22px 45px;
font-size: 1rem;
text-transform: uppercase;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.294);
}
.container__text {
padding: 40px 40px 0;
}
.container__text h1 {
color: #351897;
font-weight: 400;
}
.container__text p {
font-size: 0.9rem;
}
.container__text .container__text__timing {
display: flex;
margin: 20px 0 10px;
}
.container__text .container__text__timing .container__text__timing_time {
margin-right: 40px;
}
.container__text .container__text__timing h2 {
font-size: 1rem;
font-weight: 400;
margin-top: 20px;
margin-right: 30px;
}
.second_half {
margin-left: 20px;
}
.container__text .container__text__timing p {
color: #351897;
font-weight: bold;
font-size: 1.2rem;
}
.title-container {
background: yellow;
display: flex;
justify-content: center;
align-items: center;
writing-mode: tb-rl;
margin-left: 5px;
margin-right: 5px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.title-container span {
transform: rotate(180deg);
display: flex;
text-align: center;
min-height: 10em;
vertical-align: middle;
line-height: 2em;
justify-content: center;
width: 2em;
}
.vl {
border-left: 4px solid black;
height: 100px;
}
hr {
border: 0;
height: 1px;
width: 100%;
position: relative;
margin-top: 0;
}
<!DOCTYPE html>
<html>
<head>
<script>
function clearBox(elementID) {
document.getElementById(elementID).innerHTML = "";
var x = document.getElementById("Gabel");
if (x.style.display === "none") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</head>
<body>
<div><button class="button button1">Main Menu</button></div>
<div id="image">
<div class="row" id="container-item">
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>GABEL LOFFEL</h3>
</div>
<div class="card-img-wrapper ">
<button class="button2" onclick="clearBox('container-item')">
<img src="assets\image_1.jpg" alt="">
</button>
<div class="content">
<hr>
<div class="para d-flex justify-content-center align-items-center">
<p>Get out your <br> Lederhosen!</p>
</div>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container_Gabel" id="Gabel">
<div class="title-container"><span>
<h2>GABEL LOFFEL</h2>
</span></div>
<div>
<img src="assets\swiss.jpg" alt="Pancake" />
</div>
<div class="container__text">
<h1>Gabel Loffell</h1>
<div class="container__text__timing">
<div class="container__text__timing_time">
<h2>
235 GLENDALE AVE.<br>
MERIDIAN CITY<br>
T: 490 49 4000<br>
W: GANDG.RES
</h2>
</div>
<div class="container__text__timing_time vl"></div>
<div class="container__text__timing_time">
<h2 class="second_half">
CATEGORY: SWISS<br>
OPEN: 10AM TO 10PM<br>
PRICE: $$$
</h2>
</div>
</div>
<hr>
<div class="body_container">
<div class="body_card">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor sodales purus, id
accumsan est sodales sed. Aenean tempus laoreet molestie. Ut leo ipsum, euismod a ante vitae,
dapibus porttitor orci. Suspendisse nec porta urna. Proin neque neque, imperdiet laoreet turpis
a, tincidunt convallis neque. Nunc sed nisi tristique, auctor sapien sit amet, rutrum massa. Nam
non enim placerat, egestas risus id, tincidunt nisl. Quisque vestibulum dolor non pharetra
fermentum. Sed vestibulum sapien dui, ut mollis augue luctus ac. Sed magna ex, interdum sit amet
velit ac, elementum scelerisque tortor. Cras eget maximus diam.
<br><br>Aliquam ultrices varius lorem sed elementum. Aenean rutrum efficitur suscipit. In quis
ligula nulla. Aliquam dictum ex ut metus vulputate feugiat. Phasellus sagittis consequat dolor,
id molestie ante tempus at. Sed ullamcorper velit id nulla mollis cursus. Vivamus nisl dolor,
posuere vehicula congue vel, ullamcorper ac nulla. Suspendisse iaculis enim tellus, ut congue
turpis dapibus ac. In congue nulla id gravida pellentesque. Donec rutrum urna nec metus
tristique, a commodo dui porta. Etiam semper, lacus non eleifend imperdiet, ipsum diam vulputate
eros, non laoreet ligula nibh vel lorem. Ut eu volutpat turpis. Nulla lobortis, velit ut varius
sollicitudin, nibh elit ornare diam, vel viverra odio orci a dui. Donec vel nulla vitae ex
imperdiet congue ut id metus. Sed sit amet condimentum eros.
</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>

Possibly try toggling opacity instead of display
#Gabel {
background-color: #fff;
position: relative;
display: flex;
border-radius: 20px;
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.356);
padding: 0;
top: 300px;
opacity: 0;
width: 80%;
}
.container_Gabel img {
width: auto;
height: 100%;
border-radius: 5px 0 0 5px;
}
.container_Gabel .btn {
position: absolute;
bottom: -20px;
right: -20px;
border: none;
outline: none;
display: flex;
align-items: center;
background-color: #fc9400;
color: #fff;
padding: 22px 45px;
font-size: 1rem;
text-transform: uppercase;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.294);
}
.container__text {
padding: 40px 40px 0;
}
.container__text h1 {
color: #351897;
font-weight: 400;
}
.container__text p {
font-size: 0.9rem;
}
.container__text .container__text__timing {
display: flex;
margin: 20px 0 10px;
}
.container__text .container__text__timing .container__text__timing_time {
margin-right: 40px;
}
.container__text .container__text__timing h2 {
font-size: 1rem;
font-weight: 400;
margin-top: 20px;
margin-right: 30px;
}
.second_half {
margin-left: 20px;
}
.container__text .container__text__timing p {
color: #351897;
font-weight: bold;
font-size: 1.2rem;
}
.title-container {
background: yellow;
display: flex;
justify-content: center;
align-items: center;
writing-mode: tb-rl;
margin-left: 5px;
margin-right: 5px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.title-container span {
transform: rotate(180deg);
display: flex;
text-align: center;
min-height: 10em;
vertical-align: middle;
line-height: 2em;
justify-content: center;
width: 2em;
}
.vl {
border-left: 4px solid black;
height: 100px;
}
hr {
border: 0;
height: 1px;
width: 100%;
position: relative;
margin-top: 0;
}
<script>
function clearBox(elementID) {
document.getElementById(elementID).innerHTML = "";
var x = document.getElementById("Gabel");
if (x.style.opacity === "0") {
x.style.opacity = "0";
} else {
x.style.opacity = "1";
}
}
</script>
<body>
<div><button class="button button1">Main Menu</button></div>
<div id="image">
<div class="row" id="container-item">
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>GABEL LOFFEL</h3>
</div>
<div class="card-img-wrapper ">
<button class="button2" onclick="clearBox('container-item')"><img src="assets\image_1.jpg"
alt=""></button>
<div class="content">
<hr>
<div class="para d-flex justify-content-center align-items-center">
<p>Get out your <br> Lederhosen!</p>
</div>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container_Gabel" id="Gabel">
<div class="title-container"><span>
<h2>GABEL LOFFEL</h2>
</span></div>
<div>
<img src="assets\swiss.jpg" alt="Pancake" />
</div>
<div class="container__text">
<h1>Gabel Loffell</h1>
<div class="container__text__timing">
<div class="container__text__timing_time">
<h2>
235 GLENDALE AVE.<br>
MERIDIAN CITY<br>
T: 490 49 4000<br>
W: GANDG.RES
</h2>
</div>
<div class="container__text__timing_time vl"></div>
<div class="container__text__timing_time">
<h2 class="second_half">
CATEGORY: SWISS<br>
OPEN: 10AM TO 10PM<br>
PRICE: $$$
</h2>
</div>
</div>
<hr>
<div class="body_container">
<div class="body_card">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor sodales purus, id
accumsan est sodales sed. Aenean tempus laoreet molestie. Ut leo ipsum, euismod a ante vitae,
dapibus porttitor orci. Suspendisse nec porta urna. Proin neque neque, imperdiet laoreet turpis
a, tincidunt convallis neque. Nunc sed nisi tristique, auctor sapien sit amet, rutrum massa. Nam
non enim placerat, egestas risus id, tincidunt nisl. Quisque vestibulum dolor non pharetra
fermentum. Sed vestibulum sapien dui, ut mollis augue luctus ac. Sed magna ex, interdum sit amet
velit ac, elementum scelerisque tortor. Cras eget maximus diam.
<br><br>Aliquam ultrices varius lorem sed elementum. Aenean rutrum efficitur suscipit. In quis
ligula nulla. Aliquam dictum ex ut metus vulputate feugiat. Phasellus sagittis consequat dolor,
id molestie ante tempus at. Sed ullamcorper velit id nulla mollis cursus. Vivamus nisl dolor,
posuere vehicula congue vel, ullamcorper ac nulla. Suspendisse iaculis enim tellus, ut congue
turpis dapibus ac. In congue nulla id gravida pellentesque. Donec rutrum urna nec metus
tristique, a commodo dui porta. Etiam semper, lacus non eleifend imperdiet, ipsum diam vulputate
eros, non laoreet ligula nibh vel lorem. Ut eu volutpat turpis. Nulla lobortis, velit ut varius
sollicitudin, nibh elit ornare diam, vel viverra odio orci a dui. Donec vel nulla vitae ex
imperdiet congue ut id metus. Sed sit amet condimentum eros.
</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>

Try using visibility property, which leaves an element in normal document flow, display: none essentially removes the element completely from the document.
Here, if you need more detail.

Try using
visibility:hidden;
and
visibility: visible;
to hide and show the element

How to get a tooltip to show up when an input is clicked?

I have a form with text inputs and a tooltip should show up whenever an input is clicked (or better yet, focused), and it should disappear whenever something else is clicked. I know that I should probably use JavaScript's getElementById and attach a click event listener but my knowledge stops there. I'm not sure how to toggle the CSS code I have which is currently working but on hover. I am not looking for :active pseudo-class.
HTML:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae consequat dui, ut ultricies tortor. Fusce imperdiet augue sit amet magna lobortis eleifend. Sed gravida consectetur magna vitae luctus. Suspendisse potenti. Cras luctus porttitor viverra. Aenean ac magna ullamcorper, ullamcorper sem non, mattis felis. Morbi ultricies pretium dui, quis posuere sapien tristique sit amet. Sed et velit tincidunt, convallis enim sed, imperdiet lectus. In quis diam aliquet, pharetra nisi et, interdum eros. Nullam rutrum lectus at est lacinia facilisis. Nullam eu gravida felis. Suspendisse ut magna id nisi fringilla venenatis. Cras facilisis tellus at erat fermentum congue. Nullam dapibus varius nibh, eu pharetra leo vehicula nec.
</p>
<label>Username</label>
<div data-tip="Only A-Z">
<span></span>
<input id='username-input' type="text">
</div>
<label>Password</label>
<div data-tip="8 characters minimum">
<span></span>
<input id='password-input' type="text">
</div>
<label>Email</label>
<div data-tip="E-mail is only for registration">
<span></span>
<input id='email-input' type="text">
</div>
CSS:
[data-tip] {
position: relative;
}
[data-tip]::before {
content: '';
display: none;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #ccc;
position: absolute;
top: -10px;
left: 15px;
z-index: 10;
font-size: 1em;
line-height: 2em;
width: 0;
height: 0;
}
[data-tip] > span {
display: none;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-top: 16px solid black;
position: absolute;
top: -9px;
left: 14px;
z-index: 7;
font-size: 1em;
line-height: 2em;
width: 0;
height: 0;
}
[data-tip]::after {
display: none;
content: attr(data-tip);
position: absolute;
top: -54px;
left: 0px;
border: 1px solid black;
padding: 10px 20px;
background-color: #ccc;
color: black;
z-index: 9;
font-size: 0.75em;
height: 4em;
text-align: center;
vertical-align: middle;
line-height: 2em;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
box-sizing: border-box;
white-space: nowrap;
word-wrap: normal;
}
[data-tip]:hover > span,
[data-tip]:hover::before,
[data-tip]:hover::after {
display: block;
}
JavaScript:
input = document.getElementById('email-input');
input.addEventListener('click', function() {
/* toggle CSS code */
});
jsfiddle link

You're right that you should handle this with Javascript:
var inputs = document.querySelectorAll('.tooltip');
inputs.forEach(function(el){
el.addEventListener("click", function(e){
inputs.forEach(function(el2){
el2.classList.remove("active");
});
this.classList.add("active");
});
});
[data-tip] {
position: relative;
}
[data-tip]::before {
content: '';
display: none;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #ccc;
position: absolute;
top: -10px;
left: 15px;
z-index: 10;
font-size: 1em;
line-height: 2em;
width: 0;
height: 0;
}
[data-tip] > span {
display: none;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-top: 16px solid black;
position: absolute;
top: -9px;
left: 14px;
z-index: 7;
font-size: 1em;
line-height: 2em;
width: 0;
height: 0;
}
[data-tip]::after {
display: none;
content: attr(data-tip);
position: absolute;
top: -54px;
left: 0px;
border: 1px solid black;
padding: 10px 20px;
background-color: #ccc;
color: black;
z-index: 9;
font-size: 0.75em;
height: 4em;
text-align: center;
vertical-align: middle;
line-height: 2em;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
box-sizing: border-box;
white-space: nowrap;
word-wrap: normal;
}
.tooltip.active > span,
[data-tip].active::before,
[data-tip].active::after {
display: block;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae consequat dui, ut ultricies tortor. Fusce imperdiet augue sit amet magna lobortis eleifend. Sed gravida consectetur magna vitae luctus. Suspendisse potenti. Cras luctus porttitor viverra. Aenean ac magna ullamcorper, ullamcorper sem non, mattis felis. Morbi ultricies pretium dui, quis posuere sapien tristique sit amet. Sed et velit tincidunt, convallis enim sed, imperdiet lectus. In quis diam aliquet, pharetra nisi et, interdum eros. Nullam rutrum lectus at est lacinia facilisis. Nullam eu gravida felis. Suspendisse ut magna id nisi fringilla venenatis. Cras facilisis tellus at erat fermentum congue. Nullam dapibus varius nibh, eu pharetra leo vehicula nec.
</p>
<label>Username</label>
<div class="tooltip" data-tip="Only A-Z">
<span></span>
<input id='username-input' type="text">
</div>
<label>Password</label>
<div class="tooltip" data-tip="8 characters minimum">
<span></span>
<input id='password-input' type="text">
</div>
<label>Email</label>
<div class="tooltip" data-tip="E-mail is only for registration">
<span></span>
<input id='email-input' type="text">
</div>

You don't need javascript to handle this, css input comes with focus pseudo,
I have modified your code, you can run the snippet below:
label { display: inline-block; }
div {
position: relative;
}
input ~ span {
display: none;
position: absolute;
bottom: 30px;
}
input ~ span span {
display: block;
position: relative;
border: 1px solid black;
z-index: 3;
background-color: #ccc;
font-size: 1em;
line-height: 2em;
border-radius: 0.5em;
box-sizing: border-box;
white-space: nowrap;
word-wrap: normal;
color: black;
height: 4em;
text-align: center;
vertical-align: middle;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
padding: 10px 20px;
}
input ~ span::before {
content: '';
display: none;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #ccc;
position: absolute;
bottom: -10px;
left: 14px;
z-index: 9;
font-size: 1em;
line-height: 2em;
width: 0;
height: 0;
}
input ~ span::after {
content: '';
display: none;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-top: 15px solid black;
position: absolute;
bottom: -11px;
left: 13px;
z-index: 1;
font-size: 1em;
line-height: 2em;
width: 0;
height: 0;
}
input:focus ~ span::before,
input:focus ~ span::after,
input:focus ~ span {
display: block;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae consequat dui, ut ultricies tortor. Fusce imperdiet augue sit amet magna lobortis eleifend. Sed gravida consectetur magna vitae luctus. Suspendisse potenti. Cras luctus porttitor viverra. Aenean ac magna ullamcorper, ullamcorper sem non, mattis felis. Morbi ultricies pretium dui, quis posuere sapien tristique sit amet. Sed et velit tincidunt, convallis enim sed, imperdiet lectus. In quis diam aliquet, pharetra nisi et, interdum eros. Nullam rutrum lectus at est lacinia facilisis. Nullam eu gravida felis. Suspendisse ut magna id nisi fringilla venenatis. Cras facilisis tellus at erat fermentum congue. Nullam dapibus varius nibh, eu pharetra leo vehicula nec.
</p>
<label>Username</label>
<div>
<input id='username-input' type="text">
<span><span>Only A-Z</span></span>
</div>
<label>Password</label>
<div>
<input id='password-input' type="text">
<span><span>8 characters minimum</span></span>
</div>
<label>Email</label>
<div >
<input id='email-input' type="text">
<span>
<span>E-mail is only for registration</span>
</span>
</div>

Okay so I went and played a bit with your code and my conclusions are:
You over-complicated yourself without a need when decided to build your tooltip with the pseudo-elements ::before and ::after. If you could simply work with a main <div> container for your tooltip and inside it all your other <div> elements that compose its pieces that would be best for you and prevent such issues.
In regards to your question, there is a way to modify pseudo-class in Javascript but it requires quite a bit of coding and seems very overly complicated for the relatively simple challenge you are facing, any way you can check the solution here
I would kindly advise you though to build your tooltip with <div>s and save yourself all this hassle.
You can then do the following to your tooltip. First set a .tooltip{...} class to the tooltip container and its visibility: hidden or display: none depends on your preference and app needs.
If you go with visibility: hidden you can toggle the property like so on click like you desired:
CSS
.tooltip {
visibility: hidden;
}
JavaScript
document.querySelector("tooltip").classList.add('hidden-tooltip');
To later remove the same class, you could use:
document.getElementById("tooltip").classList.remove('hidden-tooltip');
If you decide to go with display property over the visibility just toggle its values from none to block or flex depends on your needs in that layout. Enjoy

navigation buttons shift when responsive menu is clicked

Below is a navigation bar with a logo (home button) to the left and a call button and menu dropdown button to the right. Once the menu button is clicked and the dropdown menu is opened the call button moves to the right on top of the menu button and the entire navigation bar turns into just 1 button. What is causing this shift?
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body {
position: relative;
height: 100vh;
margin: 0px;
background-color: #e6e6e6e6;
color: #444;
font: .9em Arial, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #185b9b;
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #2672b2;
color: white;
}
.active {
background-color: #185b9b;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
.main {
padding: 16px;
margin-top: 30px;
height: 100%;
}
.wrapper {
box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
border-radius: 5px;
overflow: hidden;
margin-bottom: 20px;
background-color: white;
}
#one {
float: left;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
min-height: 130px;
width: 200px;
height: 100%;
}
#one img {
max-height: 25px;
max-width: 160px;
}
#two {
overflow: hidden;
margin: 10px;
min-height: 130px;
}
#media screen and (max-width: 910px) {
#one {
float: none;
margin-right: 10;
width: auto;
border: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="topnav" id="myTopnav">
Logo Name
Contact Us
Download
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<a href="tel:800-922-0204" class="icon">
<i class="fas fa-phone"></i>
</a>
</div>
<div class="main">
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
</div>
</body>
</html>

The bars icon and phone icon are both using the same class, so they are both being assigned the same positioning properties. Make them separate classes so they can keep their unique positions instead of overlapping.
body {
position: relative;
height: 100vh;
margin: 0px;
background-color: #e6e6e6e6;
color: #444;
font: .9em Arial, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #185b9b;
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #2672b2;
color: white;
}
.active {
background-color: #185b9b;
color: white;
}
.topnav .iconBars, .topnav .iconPhone {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.iconBars, .topnav a.iconPhone {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .iconBars {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive .iconPhone {
position: absolute;
right: 47px;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
.main {
padding: 16px;
margin-top: 30px;
height: 100%;
}
.wrapper {
box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
border-radius: 5px;
overflow: hidden;
margin-bottom: 20px;
background-color: white;
}
#one {
float: left;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
min-height: 130px;
width: 200px;
height: 100%;
}
#one img {
max-height: 25px;
max-width: 160px;
}
#two {
overflow: hidden;
margin: 10px;
min-height: 130px;
}
#media screen and (max-width: 910px) {
#one {
float: none;
margin-right: 10;
width: auto;
border: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class="topnav" id="myTopnav">
Logo Name
Contact Us
Download
<a href="javascript:void(0);" class="iconBars" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<a href="tel:800-922-0204" class="iconPhone">
<i class="fas fa-phone"></i>
</a>
</div>
<div class="main">
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>

I see that you have a media query with position: absolute
#media screen and (max-width: 600px) {
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
This solution is without position: absolute
I removed the above from css, i give in .topnav
.topnav {
display: flex;
justify-content: space-between;
}
And put both your menu links and icons inside a div. Take a look in the code above.
I hope it helps you.
body {
position: relative;
height: 100vh;
margin: 0px;
background-color: #e6e6e6e6;
color: #444;
font: .9em Arial, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #185b9b;
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: space-between;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #2672b2;
color: white;
}
.active {
background-color: #185b9b;
color: white;
}
.topnav .icon {
display: none;
}
.menu-icons {
display: flex;
height:48px;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
.main {
padding: 16px;
margin-top: 30px;
height: 100%;
}
.wrapper {
box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
border-radius: 5px;
overflow: hidden;
margin-bottom: 20px;
background-color: white;
}
#one {
float: left;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
min-height: 130px;
width: 200px;
height: 100%;
}
#one img {
max-height: 25px;
max-width: 160px;
}
#two {
overflow: hidden;
margin: 10px;
min-height: 130px;
}
#media screen and (max-width: 910px) {
#one {
float: none;
margin-right: 10;
width: auto;
border: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="topnav" id="myTopnav">
<div>
Logo Name
Contact Us
Download
</div>
<div class="menu-icons">
<a href="tel:800-922-0204" class="icon">
<i class="fas fa-phone"></i>
</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
<div class="main">
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
`

Menu is not dropping down after user come back to the top of the page

On my website I've got a sticky, dropdown menu. When page is already loaded (without scrolling) or after user page scrolling there's everything ok - menu is dropping down.
$(document).ready(function(){
$('li').hover(function(){
$(this).find('ul>li').stop().slideToggle(250);
});
});
$(function () {
var stickyHeaderTop = $('#navigationwrap').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#navigationwrap').css({
position: 'fixed',
top: '0px'
});
$('#contentwrap').css('margin-top', $('#navigationwrap').outerHeight(true) + parseInt($('#headerwrap').css('marginBottom')));
} else {
$('#navigationwrap').css({
position: 'static',
top: '0px'
});
$('#contentwrap').css('margin-top', '0px');
}
});
});
body {
font-family: 'Roboto Condensed', sans-serif;
font-size: 18px;
color: #333;
}
p {
padding: 10px;
}
#navigation ul {
margin: 0;
padding: 0;
width: auto;
list-style-type: none;
text-align: center;
display: inline-block;
}
#navigation {
text-align: center;
}
#navigation ul li {
float: left;
font-weight: bold;
font-size: 20px;
line-height: 40px;
text-align: center;
text-shadow: 1px 1px 1px #000;
width: 140px;
}
#navigation ul li:hover {
background: #9D9FA4;
border-radius: 10px;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
}
ul li li {
background: #3F61A9;
color: #fff;
display: none;
}
ul li li:hover {
background: #9D9FA4;
}
ul li li a{
text-decoration: none;
color: #fff;
}
#wrapper {
margin: 0 auto;
width: 1000px;
}
#headerwrap {
width: 1000px;
float: left;
margin: 0 auto;
position: relative;
}
#header {
height: 125px;
background: #000000;
border-radius: 10px;
border: 1px solid #000000;
margin: 5px;
position: relative;
}
#navigationwrap {
width: 1000px;
float: left;
margin: 0 auto;
position: relative;
}
#navigation {
height: 40px;
background: #52bf6e;
border-radius: 10px;
border: 1px solid #3ea858;
margin: 5px;
}
#contentwrap {
width: 700px;
float: left;
margin: 0 auto;
}
#content {
background: #FFFFFF;
border-radius: 10px;
margin: 5px;
}
#leftcolumnwrap {
width: 150px;
float: left;
margin: 0 auto;
}
#leftcolumn {
border-radius: 10px;
margin: 5px;
}
#rightcolumnwrap {
width: 150px;
float: left;
margin: 0 auto;
}
#rightcolumn {
border-radius: 10px;
margin: 5px;
}
#footerwrap {
width: 1000px;
float: left;
margin: 0 auto;
clear: both;
}
#footer {
height: 40px;
background: #9D9FA4;
border-radius: 10px;
border: 1px solid #888a91;
margin: 5px;
background-color: #9D9FA4;
text-align: center;
color: #FFFFFF;
font-weight: bold;
}
#navigationwrap_placeholder {
display:none;
height: 40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="headerwrap">
<div id="header">
</div>
</div>
<div id="navigationwrap">
<div id="navigation">
<ul>
<li>main menu</li>
<li><a>test</a>
<ul class="sub-menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="navigationwrap_placeholder"></div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
<p></p>
</div>
</div>
<div id="contentwrap">
<div id="content">
<br><br>
<p>Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. </p>
<p>Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. </p>
<br><br>
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
<p></p>
</div>
</div>
<div id="footerwrap">
<div id="footer">
</div>
</div>
</div>
</body>
</html>
The problem is when user comes back to the top of the page. Then menu is not dropping down. I have got two JS scripts. One allows to drop down the menu, the other one causes that the menu is sticked to the top of the page after user scrolling.
I found out that when I remove #content and #contentwrap from CSS, then menu is dropping down, but it appears behind the text. However, I wouldn't like to remove it.
Also, when I hover over ul > li > a called 'test' it moves to right a little. I would like to get rid of it.
What should I add or delete so as menu would work properly no matter where menu is displayed. Thanks!

You need to change the position to relative instead of static when you are scrolling up.
$(document).ready(function(){
$('li').hover(function(){
$(this).find('ul>li').stop().slideToggle(250);
});
});
$(function () {
var stickyHeaderTop = $('#navigationwrap').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#navigationwrap').css({
position: 'fixed',
top: '0px'
});
$('#contentwrap').css('margin-top', $('#navigationwrap').outerHeight(true) + parseInt($('#headerwrap').css('marginBottom')));
} else {
$('#navigationwrap').css({
position: 'relative',
top: '0px'
});
$('#contentwrap').css('margin-top', '0px');
}
});
});
body {
font-family: 'Roboto Condensed', sans-serif;
font-size: 18px;
color: #333;
}
p {
padding: 10px;
}
#navigation ul {
margin: 0;
padding: 0;
width: auto;
list-style-type: none;
text-align: center;
display: inline-block;
}
#navigation {
text-align: center;
}
#navigation ul li {
float: left;
font-weight: bold;
font-size: 20px;
line-height: 40px;
text-align: center;
text-shadow: 1px 1px 1px #000;
width: 140px;
}
#navigation ul li:hover {
background: #9D9FA4;
border-radius: 10px;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
}
ul li li {
background: #3F61A9;
color: #fff;
display: none;
}
ul li li:hover {
background: #9D9FA4;
}
ul li li a{
text-decoration: none;
color: #fff;
}
#wrapper {
margin: 0 auto;
width: 1000px;
}
#headerwrap {
width: 1000px;
float: left;
margin: 0 auto;
position: relative;
}
#header {
height: 125px;
background: #000000;
border-radius: 10px;
border: 1px solid #000000;
margin: 5px;
position: relative;
}
#navigationwrap {
width: 1000px;
float: left;
margin: 0 auto;
position: relative;
}
#navigation {
height: 40px;
background: #52bf6e;
border-radius: 10px;
border: 1px solid #3ea858;
margin: 5px;
}
#contentwrap {
width: 700px;
float: left;
margin: 0 auto;
}
#content {
background: #FFFFFF;
border-radius: 10px;
margin: 5px;
}
#leftcolumnwrap {
width: 150px;
float: left;
margin: 0 auto;
}
#leftcolumn {
border-radius: 10px;
margin: 5px;
}
#rightcolumnwrap {
width: 150px;
float: left;
margin: 0 auto;
}
#rightcolumn {
border-radius: 10px;
margin: 5px;
}
#footerwrap {
width: 1000px;
float: left;
margin: 0 auto;
clear: both;
}
#footer {
height: 40px;
background: #9D9FA4;
border-radius: 10px;
border: 1px solid #888a91;
margin: 5px;
background-color: #9D9FA4;
text-align: center;
color: #FFFFFF;
font-weight: bold;
}
#navigationwrap_placeholder {
display:none;
height: 40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="headerwrap">
<div id="header">
</div>
</div>
<div id="navigationwrap">
<div id="navigation">
<ul>
<li>main menu</li>
<li><a>test</a>
<ul class="sub-menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="navigationwrap_placeholder"></div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
<p></p>
</div>
</div>
<div id="contentwrap">
<div id="content">
<br><br>
<p>Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. </p>
<p>Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. </p>
<p>Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. </p>
<p>Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. </p>
<br><br>
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
<p></p>
</div>
</div>
<div id="footerwrap">
<div id="footer">
</div>
</div>
</div>
</body>
</html>

Can't get jQuery localScroll to work in my code

I can't get jQuery localScroll to work at all. I tried everything, please help me I am still a noob. I have tried multiple methods but nothing works! Please look over my code and tell me if you know how to fix this, please!
CSS
#import url('https://fonts.googleapis.com/css?family=Lato');
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:700');
#font-face {
font-family: 'Streamster'; /*a name to be used later*/
src: url('http://127.0.0.1:56585/fonts/Streamster.ttf'); /*URL to font*/
}
#button {
background-color: white;
border: none;
color: BLACK;
padding: 15px 32px;
margin-top: -20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: 'Source Sans Pro', sans-serif;
margin-top:10%;
}
.logo{
margin-left: 140px;
margin-top: 10px;
margin-bottom:10px;
height: 50px;
width: 50px;
float: left;
}
#logo1{
margin-left: 140px;
margin-top: 20px;
margin-bottom:10px;
height: 50px;
width: 150px;
float: left;
color: white;
font-family: 'Source Sans Pro', sans-serif;
}
header {
background: rgba(0,0,0,1);
width:100%;
z-index: 1000000;
}
header::after {
content: '';
display: table;
clear:both;
}
nav {
display:inline-block;
float: right;
padding-right: 10%;
}
nav ul {
margin: 0;
padding:0 ;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 28px;
position: relative;
}
nav a{
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
font-weight: 700;
}
nav a:hover {
color: #fff;
}
nav a::before {
content: '';
display: block;
height: 5px;
width: 100%;
background-color: #fff;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 200ms;
}
nav a:hover::before {
width: 100%;
}
html, body {
overflow-x: hidden;
margin: 0;
height: 100%;
font-family: 'Lato', sans-serif;
}
section {
position: relative;
margin: 0 -9999rem;
padding:9.25rem 9999rem;
text-align: center;
}
#welcomesec{
background-image:url(ele.jpg);
height: 90vh;
background-repeat: no-repeat;
background-position: 50% 50%;
}
#welcomesec h1 {
padding-top:10%;
text-align: left;
text-align: center;
color: #ecf0f1;
font-family: 'Source Sans Pro', sans-serif;
font-size: 95px;
}
#about{
background-color: #fff;
color: black;
}
#about p{
padding-left: 20%;
padding-right:20%;
text-align: center;
}
#portfolio{
background-color: black;
color: #ecf0f1;
}
#contact{
background-color: black;
color: #ecf0f1;
}
.sectionImg {
position: relative;
margin: 0 -9999rem;
padding:5.25rem 9999rem;
text-align: center;
}
.sectionImg1 {
position: relative;
float: right;
padding:1.25rem 9999rem;
}
img{
padding: 5px;}
#clientssection{
background:white;
color:black;
}
#clientssection p{
padding-left: 20%;
padding-right:20%;
text-align: center;
}
#media only screen and (max-device-width:990px){
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>SLAD DEVELOPMENT</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="custom.js"></script>
</head>
<body>
<header>
<Div id="gg"><div id="header" class="container">
<!--<img src="logo.png" alt="logo" class="logo">-->
<h1 id="logo1">SLAD ©</h1>
<nav>
<ul>
<li >Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</nav>
</div></Div>
</header>
<section id="welcomesec">
<h1>Creativity is key.</h1>
<a id="button" class="slide-section" href="/#about">EXPLORE</a>
</section>
<section id="about">
<h1>About Myself</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit erat quis enim dapibus, a commodo mi accumsan. Cras tempor ullamcorper ligula convallis aliquam. Mauris in diam sed enim ultricies venenatis. In eleifend eros eget mi dignissim aliquam. Aliquam at urna eu mi pulvinar ullamcorper eget at lectus. Aliquam mi neque, porttitor in massa eu, vulputate finibus eros. Vivamus suscipit lectus id ex aliquam rutrum. Aenean efficitur sed odio at vulputate. Nunc elementum bibendum aliquam. Nam lacinia velit at leo ornare, et convallis erat rutrum.</p>
</section>
<div class="sectionImg" id="portfolio">
<h1>Portfolio</h1>
<img src="http://placehold.it/350x300">
<img src="http://placehold.it/350x300">
<img src="http://placehold.it/350x300">
<img src="http://placehold.it/350x300">
</div>
<section id="clientssection">
<h1>Clients</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit erat quis enim dapibus, a commodo mi accumsan. Cras tempor ullamcorper ligula convallis aliquam. Mauris in diam sed enim ultricies venenatis. In eleifend eros eget mi dignissim aliquam. Aliquam at urna eu mi pulvinar ullamcorper eget at lectus. Aliquam mi neque, porttitor in massa eu, vulputate finibus eros. Vivamus suscipit lectus id ex aliquam rutrum. Aenean efficitur sed odio at vulputate. Nunc elementum bibendum aliquam. Nam lacinia velit at leo ornare, et convallis erat rutrum.</p>
</section>
<section id="contact">
<h1>Feel free to Contact me </h1>
<i class="fa fa-twitter-square" style="color:white; font-size:2em;" aria-hidden="true"></i>
<A> </A>
<a><i class="fa fa-facebook-square" style="color:white; font-size:2em;" aria-hidden="true"></i></a>
</section>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

make div appear over another div on scroll - javascript

Related

HTML CSS JS formatting of display: none

How to get a tooltip to show up when an input is clicked?

navigation buttons shift when responsive menu is clicked

Menu is not dropping down after user come back to the top of the page

Can't get jQuery localScroll to work in my code

Categories

Resources