JSFiddle dropdown button not clickable

JSFiddle dropdown button not clickable - javascript

I'm creating a test drop-down menu. The open menu button works fine but the close button is not clickable/hover-able/etc. When the open menu button is pressed, it should make the other one visible and clickable.
Not sure why the close button isn't working, its display property is being set back to block on click.
function menu_change() {
var burg = document.getElementById("burg");
var cross = document.getElementById("cross");
var body_freeze = document.getElementById("body_freeze");
var nav_list = document.getElementById("nav_list");
var nav_items = document.getElementsByClassName("nav_item");
if (burg.style.display === 'none') {
burg.style.display = 'block';
cross.style.display = 'none';
nav_list.style.display = 'none';
body_freeze.style.position = 'relative';
} else {
burg.style.display = 'none';
cross.style.display = 'block';
nav_list.style.display = 'block';
body_freeze.style.position = 'fixed';
}
}
.fixed_nav {
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 50px;
background-color: white;
border-bottom: 1px solid black;
box-shadow: 0 4px 8px 0 rgb(0, 0, 0, .2);
}
#burg {
z-index: 3;
float: right;
display: block;
margin: 20px;
width: 100px;
height: auto;
}
#burg:hover {
background-color: gray;
}
#cross {
z-index: 3;
margin: 20px;
display: none;
float: right;
width: 100px;
height: auto;
}
#cross:hover {
background-color: gray;
}
#nav_list {
height: 100vh;
width: 100%;
background-color: white;
display: none;
z-index: 1;
}
#dummy_text {
margin-top: 50px;
}
.nav_item {
margin-top: 50px;
color: red;
width: 100%;
background-color: white;
border-top: 1px solid black;
border-bottom: 1px solid black;
z-index: 2;
}
#body_freeze {}
<html>
<head>
<title>ExampleError</title>
</head>
<body>
<nav class="fixed_nav">
<button id="burg" onclick="menu_change();">
☰
</button>
<button id="cross" onclick="menu_change();">
˟
</button>
<ul id="nav_list">
<div class="nav_item">
<a href="#">
<li>Inventory</li>
</a>
</div>
<div class="nav_item">
<a href="#">
<li>Finance</li>
</a>
</div>
</ul>
</nav>
<div id="body_freeze">
<p id="dummy_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lobortis elementum nibh tellus molestie nunc non blandit massa. Sit amet purus gravida quis blandit. Ac feugiat sed lectus vestibulum
mattis ullamcorper velit. Odio ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Egestas sed tempus urna et pharetra pharetra massa massa. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Rutrum tellus pellentesque
eu tincidunt tortor aliquam nulla facilisi. In pellentesque massa placerat duis. Erat velit scelerisque in dictum non. Massa placerat duis ultricies lacus sed turpis tincidunt. Urna molestie at elementum eu facilisis sed odio. Ornare arcu odio ut
sem nulla. Consequat interdum varius sit amet mattis vulputate. Justo donec enim diam vulputate ut. Etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Risus at ultrices mi tempus. Vestibulum morbi blandit cursus risus at ultrices
mi tempus. Ante metus dictum at tempor commodo. Turpis nunc eget lorem dolor. Leo vel orci porta non pulvinar neque. Volutpat sed cras ornare arcu dui vivamus arcu felis bibendum. Proin sed libero enim sed faucibus. Lacus vel facilisis volutpat
est velit. Scelerisque eleifend donec pretium vulputate sapien. Curabitur gravida arcu ac tortor. Massa eget egestas purus viverra accumsan in nisl nisi scelerisque. Viverra aliquet eget sit amet tellus cras. Massa tempor nec feugiat nisl pretium
fusce id velit ut. Ultrices sagittis orci a scelerisque. Bibendum arcu vitae elementum curabitur vitae nunc sed. Enim ut sem viverra aliquet. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Sed euismod nisi porta lorem mollis aliquam.
Ridiculus mus mauris vitae ultricies. Ullamcorper velit sed ullamcorper morbi. Adipiscing elit pellentesque habitant morbi tristique. Nibh venenatis cras sed felis eget velit. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan.
Porttitor eget dolor morbi non arcu risus quis varius. Tortor aliquam nulla facilisi cras fermentum odio eu. In iaculis nunc sed augue lacus viverra vitae congue. Ac felis donec et odio pellentesque diam volutpat. Ut lectus arcu bibendum at varius
vel pharetra vel. Feugiat in ante metus dictum at. Diam sit amet nisl suscipit. Nam aliquam sem et tortor. Arcu ac tortor dignissim convallis aenean et. Sed risus ultricies tristique nulla aliquet enim tortor at. Rhoncus dolor purus non enim praesent
elementum facilisis. Integer feugiat scelerisque varius morbi enim nunc faucibus a. At varius vel pharetra vel turpis nunc eget lorem. Quam adipiscing vitae proin sagittis. Gravida cum sociis natoque penatibus. Eu feugiat pretium nibh ipsum consequat
nisl vel. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Fringilla ut morbi tincidunt augue interdum velit euismod in. Enim tortor at auctor urna nunc. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. Arcu
cursus euismod quis viverra nibh cras pulvinar mattis. A diam maecenas sed enim. Tortor id aliquet lectus proin nibh nisl condimentum. Ut enim blandit volutpat maecenas volutpat blandit aliquam. Venenatis tellus in metus vulputate. Mollis nunc sed
id semper risus. Lacus luctus accumsan tortor posuere ac ut consequat semper. Euismod nisi porta lorem mollis aliquam ut porttitor leo a.
</p>
</div>
</body>
</html>

Your problem is that you are defining as fixed the element "body_freeze", but not defining his exact position so it is overlaying the button impedding you to click it. I edited your code and added position, top and z-index props to your id body_freeze in the style definition.
function menu_change() {
var burg = document.getElementById("burg");
var cross = document.getElementById("cross");
var body_freeze = document.getElementById("body_freeze");
var nav_list = document.getElementById("nav_list");
var nav_items = document.getElementsByClassName("nav_item");
if (burg.style.display === 'none') {
burg.style.display = 'block';
cross.style.display = 'none';
nav_list.style.display = 'none';
body_freeze.style.position = 'relative';
} else {
burg.style.display = 'none';
cross.style.display = 'block';
nav_list.style.display = 'block';
body_freeze.style.position = 'fixed';
}
}
.fixed_nav {
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 50px;
background-color: white;
border-bottom: 1px solid black;
box-shadow: 0 4px 8px 0 rgb(0, 0, 0, .2);
}
#burg {
z-index:3;
float: right;
display: block;
margin: 20px;
width: 100px;
height: auto;
}
#burg:hover
{
background-color: gray;
}
#cross {
z-index:3;
margin:20px;
display: none;
float: right;
width:100px;
height:auto;
}
#cross:hover
{
background-color: gray;
}
#nav_list {
height: 100vh;
width: 100%;
background-color: white;
display: none;
z-index: 1;
}
#dummy_text {
margin-top: 50px;
}
.nav_item {
margin-top:50px;
color: red;
width:100%;
background-color:white;
border-top:1px solid black;
border-bottom: 1px solid black;
z-index:2;
}
#body_freeze {
position: relative;
top: 100px;
z-index: 1;
}
<html>
<head>
<title>ExampleError</title>
</head>
<body>
<nav class="fixed_nav">
<button id="burg" onclick="menu_change();">
☰
</button>
<button id="cross" onclick="menu_change();">
˟
</button>
<ul id="nav_list">
<div class="nav_item">
<a href="#">
<li>Inventory</li>
</a>
</div>
<div class="nav_item">
<a href="#">
<li>Finance</li>
</a>
</div>
</ul>
</nav>
<div id="body_freeze">
<p id="dummy_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lobortis elementum nibh tellus molestie nunc non blandit massa. Sit amet purus gravida quis blandit. Ac feugiat sed lectus vestibulum
mattis ullamcorper velit. Odio ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Egestas sed tempus urna et pharetra pharetra massa massa. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Rutrum tellus pellentesque
eu tincidunt tortor aliquam nulla facilisi. In pellentesque massa placerat duis. Erat velit scelerisque in dictum non. Massa placerat duis ultricies lacus sed turpis tincidunt. Urna molestie at elementum eu facilisis sed odio. Ornare arcu odio
ut sem nulla. Consequat interdum varius sit amet mattis vulputate. Justo donec enim diam vulputate ut. Etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Risus at ultrices mi tempus. Vestibulum morbi blandit cursus risus at ultrices
mi tempus. Ante metus dictum at tempor commodo. Turpis nunc eget lorem dolor. Leo vel orci porta non pulvinar neque. Volutpat sed cras ornare arcu dui vivamus arcu felis bibendum. Proin sed libero enim sed faucibus. Lacus vel facilisis volutpat
est velit. Scelerisque eleifend donec pretium vulputate sapien. Curabitur gravida arcu ac tortor. Massa eget egestas purus viverra accumsan in nisl nisi scelerisque. Viverra aliquet eget sit amet tellus cras. Massa tempor nec feugiat nisl pretium
fusce id velit ut. Ultrices sagittis orci a scelerisque. Bibendum arcu vitae elementum curabitur vitae nunc sed. Enim ut sem viverra aliquet. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Sed euismod nisi porta lorem mollis
aliquam. Ridiculus mus mauris vitae ultricies. Ullamcorper velit sed ullamcorper morbi. Adipiscing elit pellentesque habitant morbi tristique. Nibh venenatis cras sed felis eget velit. Leo integer malesuada nunc vel risus commodo viverra maecenas
accumsan. Porttitor eget dolor morbi non arcu risus quis varius. Tortor aliquam nulla facilisi cras fermentum odio eu. In iaculis nunc sed augue lacus viverra vitae congue. Ac felis donec et odio pellentesque diam volutpat. Ut lectus arcu bibendum
at varius vel pharetra vel. Feugiat in ante metus dictum at. Diam sit amet nisl suscipit. Nam aliquam sem et tortor. Arcu ac tortor dignissim convallis aenean et. Sed risus ultricies tristique nulla aliquet enim tortor at. Rhoncus dolor purus
non enim praesent elementum facilisis. Integer feugiat scelerisque varius morbi enim nunc faucibus a. At varius vel pharetra vel turpis nunc eget lorem. Quam adipiscing vitae proin sagittis. Gravida cum sociis natoque penatibus. Eu feugiat pretium
nibh ipsum consequat nisl vel. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Fringilla ut morbi tincidunt augue interdum velit euismod in. Enim tortor at auctor urna nunc. Dolor sed viverra ipsum nunc aliquet bibendum enim
facilisis gravida. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. A diam maecenas sed enim. Tortor id aliquet lectus proin nibh nisl condimentum. Ut enim blandit volutpat maecenas volutpat blandit aliquam. Venenatis tellus in metus
vulputate. Mollis nunc sed id semper risus. Lacus luctus accumsan tortor posuere ac ut consequat semper. Euismod nisi porta lorem mollis aliquam ut porttitor leo a.
</p>
</div>
</body>
</html>

Related

On scroll fixed header glitching

My website has an onscroll fixed header at the top, but whenever I try to scroll it glitches out. When you try to scroll, it cuts off the top part of the text and seems to lurch into place. I'm trying to make it looks seamless, like this demo
Here's the code for my website. If I've missed anything let me know.
body {
margin: 0;
}
.top-container {
background-image: url("https://picsum.photos/400/200");
padding: 170px;
text-align: center;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
position: relative;
max-width: 100%;
}
.menuBar {
background-color: rgb(168, 123, 81);
padding: 30px 40px;
text-align: left;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky+.content {
padding-top: 102px;
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex1 {
background-color: rgba(230, 199, 177, 255);
width: 50%;
margin: 10px;
text-align: center;
font-size: 15px;
line-height: 25px;
}
.flex2 {
background-image: url("https://picsum.photos/400/200");
background-size: contain;
background-repeat: no-repeat;
width: 600px;
margin: 10px;
text-align: center;
margin-top: 100px;
}
<div class="top-container"></div>
<div class="menuBar" id="menuBar"> MenuBar</div>
<div class="mainContent">
<div class="flex-container">
<div class="flex1">
<h3> Welcome to Charm Thai Restaurant Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices ligula quis nibh dignissim interdum. Proin consequat sem et lacus accumsan aliquam. Vestibulum sodales pretium ex at cursus. Maecenas efficitur
finibus dictum. Duis nec quam ultrices, laoreet magna vel, auctor nunc. Sed ultricies lacus consequat velit lacinia, in consequat sapien pretium. Vestibulum sagittis ornare odio at elementum. Vestibulum sodales mauris ut tempor posuere. Nulla
orci dolor, porta sed risus viverra, consectetur hendrerit sapien. Phasellus tristique ante augue, id efficitur nisi placerat nec. Nam rhoncus erat quis feugiat sollicitudin. Mauris id magna sit amet risus bibendum pretium. Donec in mauris mi.
Morbi dignissim porttitor iaculis. Praesent mollis placerat velit, et blandit nibh venenatis nec. Fusce ut ultrices sem. Nunc eget lectus quis mauris dignissim tempor id placerat tellus. Nam vitae semper augue. Quisque rutrum laoreet urna eget
posuere. Nulla cursus tincidunt elit et placerat. Duis sed pellentesque magna, non lacinia tortor. Nam nisl dui, rutrum et sollicitudin quis, condimentum quis augue. Aenean varius, nisi at luctus dapibus, diam magna dictum ex, ac sodales ex ex
sit amet ligula. Donec pulvinar varius est. Nam vitae rutrum dolor. Donec lacinia, ex nec tempus venenatis, ligula justo dapibus diam, cursus semper augue mauris ac odio. Aliquam a arcu nec lacus rhoncus facilisis. Vestibulum sollicitudin lorem
id metus auctor, sit amet ullamcorper mauris fringilla. In in erat eu eros volutpat bibendum sit amet fermentum enim. Vestibulum dictum orci sed tincidunt posuere. Donec viverra nunc ut sem viverra, et vestibulum mauris feugiat. Donec imperdiet
quam dui, vitae vehicula ipsum hendrerit non. Phasellus nec augue eu erat posuere varius in quis odio. Nunc justo turpis, scelerisque non leo vel, laoreet ornare neque. Donec a neque ac nibh ultricies tristique id vel magna. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque viverra ante in magna fringilla, vel sodales lectus feugiat. Donec sodales, odio eget dictum scelerisque, urna massa fringilla quam, nec pharetra erat dui at massa. Maecenas
suscipit velit id scelerisque consectetur. Praesent ac egestas enim. Vestibulum nulla turpis, hendrerit nec sodales vitae, congue at felis. Cras auctor ac quam sed fermentum. Quisque libero est, aliquam ac lorem a, semper molestie mi. Cras suscipit
eu erat eget hendrerit.
</h3>
</div>
<div class="flex2">2</div>
</div>
</div>
<script>
window.onscroll = function() {
myFunction()
};
var header = document.getElementById("menuBar");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>

Use the CSS built-in position: sticky
body {
margin: 0;
}
.menuBar {
position: sticky;
top: 0;
z-index: 1;
background-color: rgb(168, 123, 81);
padding: 30px 40px;
text-align: left;
}
.top-container {
background-image: url("https://picsum.photos/400/200");
padding: 170px;
text-align: center;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
position: relative;
max-width: 100%;
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex1 {
background-color: rgba(230, 199, 177, 255);
width: 50%;
margin: 10px;
text-align: center;
font-size: 15px;
line-height: 25px;
}
.flex2 {
background-image: url("https://picsum.photos/400/200");
background-size: contain;
background-repeat: no-repeat;
width: 600px;
margin: 10px;
text-align: center;
margin-top: 100px;
}
<div class="top-container"></div>
<div class="menuBar" id="menuBar">MenuBar</div>
<div class="mainContent">
<div class="flex-container">
<div class="flex1">
<h3> Welcome to Charm Thai Restaurant Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices ligula quis nibh dignissim interdum. Proin consequat sem et lacus accumsan aliquam. Vestibulum sodales pretium ex at cursus. Maecenas efficitur
finibus dictum. Duis nec quam ultrices, laoreet magna vel, auctor nunc. Sed ultricies lacus consequat velit lacinia, in consequat sapien pretium. Vestibulum sagittis ornare odio at elementum. Vestibulum sodales mauris ut tempor posuere. Nulla
orci dolor, porta sed risus viverra, consectetur hendrerit sapien. Phasellus tristique ante augue, id efficitur nisi placerat nec. Nam rhoncus erat quis feugiat sollicitudin. Mauris id magna sit amet risus bibendum pretium. Donec in mauris mi.
Morbi dignissim porttitor iaculis. Praesent mollis placerat velit, et blandit nibh venenatis nec. Fusce ut ultrices sem. Nunc eget lectus quis mauris dignissim tempor id placerat tellus. Nam vitae semper augue. Quisque rutrum laoreet urna eget
posuere. Nulla cursus tincidunt elit et placerat. Duis sed pellentesque magna, non lacinia tortor. Nam nisl dui, rutrum et sollicitudin quis, condimentum quis augue. Aenean varius, nisi at luctus dapibus, diam magna dictum ex, ac sodales ex ex
sit amet ligula. Donec pulvinar varius est. Nam vitae rutrum dolor. Donec lacinia, ex nec tempus venenatis, ligula justo dapibus diam, cursus semper augue mauris ac odio. Aliquam a arcu nec lacus rhoncus facilisis. Vestibulum sollicitudin lorem
id metus auctor, sit amet ullamcorper mauris fringilla. In in erat eu eros volutpat bibendum sit amet fermentum enim. Vestibulum dictum orci sed tincidunt posuere. Donec viverra nunc ut sem viverra, et vestibulum mauris feugiat. Donec imperdiet
quam dui, vitae vehicula ipsum hendrerit non. Phasellus nec augue eu erat posuere varius in quis odio. Nunc justo turpis, scelerisque non leo vel, laoreet ornare neque. Donec a neque ac nibh ultricies tristique id vel magna. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque viverra ante in magna fringilla, vel sodales lectus feugiat. Donec sodales, odio eget dictum scelerisque, urna massa fringilla quam, nec pharetra erat dui at massa. Maecenas
suscipit velit id scelerisque consectetur. Praesent ac egestas enim. Vestibulum nulla turpis, hendrerit nec sodales vitae, congue at felis. Cras auctor ac quam sed fermentum. Quisque libero est, aliquam ac lorem a, semper molestie mi. Cras suscipit
eu erat eget hendrerit.
</h3>
</div>
<div class="flex2">2</div>
</div>
</div>

How do I create a modal overlay over a scrollable div with fixed width and height?

I've trying to place a modal overlay over a scrollable parent div with fixed width and height but I'm having trouble getting this to work. Here is the CSS that I'm using:
.parent {
position: relative;
border: solid 3px red;
width: 350px;
height: 200px;
overflow-y: scroll;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.5);
}
.modal {
width: 200px;
height: 100px;
background: white;
}
I have the following jsfiddle which illustrates the issue:
https://jsfiddle.net/8wgpt0d7/
You can see from the fiddle as you scroll towards the bottom the modal overlay no longer covers the background content and I want to get the modal to cover the content but I'm not sure how.
Any tips or help would be much appreciated!

Try this:
.parent {
position: relative;
border: solid 3px red;
width: 350px;
height: 200px;
}
.child {
width: 100%;
height: 100%;
overflow-y: scroll;
background: rgba(0,0,0,0.55);
}
.overlay {
position: absolute;
top: 0;
left: 0;
right:0;
width:100%;
}
.modal {
position: absolute; /* effectively fixed */
top: 50px;
left: 20px;
right:20px;
bottom:0;
background-color: #FFF;
height: 100vh;
max-height:100px;
}
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus posuere metus eu nisl tempus feugiat. Etiam eu lorem in turpis aliquet interdum eleifend quis orci. Integer egestas urna ac nunc tempus sagittis. Quisque lobortis sem sit amet lorem imperdiet, id dignissim mauris posuere. Etiam condimentum quam a sagittis scelerisque. Donec velit turpis, molestie vitae dui quis, malesuada scelerisque neque. Donec libero lacus, feugiat ut leo id, sollicitudin sodales enim.
Aliquam aliquet pretium blandit. Suspendisse at dapibus dui. Nunc bibendum euismod ipsum, a tempor felis egestas convallis. Pellentesque blandit, mi eget sollicitudin fringilla, est purus sollicitudin nunc, nec suscipit magna tellus eu sem. Praesent eget augue et sapien interdum fringilla vitae vel odio. Duis vel maximus magna. Nam vitae purus vel lacus varius aliquam quis non libero. Duis at orci maximus, dapibus leo eu, varius dui. Vestibulum id nunc ac urna ultrices accumsan. Mauris augue diam, volutpat vel lobortis in, pharetra a ligula. Nulla at consequat velit, non euismod magna. Nam sed metus nec massa eleifend pretium sed id lacus. Suspendisse at semper erat, vitae facilisis ex. Morbi consectetur eget nunc id blandit.
Proin erat dui, varius id urna eget, posuere iaculis leo. Nunc vulputate, est sit amet gravida lobortis, arcu dolor molestie erat, vitae tristique metus libero in dui. Donec vitae orci at lectus gravida pretium. Donec laoreet volutpat ullamcorper. Praesent finibus purus nec metus sagittis, id varius lorem cursus. Nulla vel placerat enim. Pellentesque quis urna sem. Nam blandit lacus et augue imperdiet tincidunt. Sed risus sem, pharetra ac turpis ut, vulputate dictum lacus.
Donec velit ligula, dictum pulvinar faucibus dignissim, porttitor et est. Vivamus pharetra erat eu sem consectetur, et fringilla diam luctus. Phasellus gravida ex neque, eu aliquet leo pulvinar ut. Proin faucibus accumsan ipsum, a aliquam lectus pellentesque a. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec metus neque, eleifend nec ex a, posuere porttitor lacus. Nulla finibus quam nulla, vitae molestie magna maximus ac. In quis felis quis elit fringilla tincidunt quis sed mi. Donec ipsum justo, congue consequat tempus quis, viverra et dolor. Aliquam cursus sapien in libero auctor, et rhoncus purus sodales. Phasellus sapien sapien, consequat id cursus quis, vestibulum vitae metus. Suspendisse ac congue diam.
Sed finibus enim ac magna tincidunt ultrices. Donec nec libero vulputate, congue tortor nec, vehicula ante. Sed consectetur nibh eu quam scelerisque pulvinar. Phasellus ac elementum velit. Curabitur malesuada leo urna, nec dignissim eros mollis eget. In aliquet suscipit nulla sed pulvinar. Morbi pellentesque mi risus, nec aliquam lorem facilisis id. Donec ut quam lorem. Phasellus risus turpis, congue id ultrices vel, pretium at magna. Fusce vestibulum eros sed metus commodo fermentum. Aliquam id rutrum felis. Suspendisse felis metus, imperdiet id pharetra finibus, bibendum at orci. Fusce tristique elementum ex, at iaculis augue. Nullam maximus imperdiet nisi, et dapibus erat dapibus ac. Morbi tincidunt urna et arcu suscipit, id ultricies erat fermentum.
</div>
<div class="overlay">
<div class="modal">
Modal
</div>
</div>
</div>

I have a less than sophisticated but very dynamic answer? https://jsfiddle.net/f2k7z4u0/
JQUERY
if($('.overlay').prop('display') != 'none'){
var $parentHeight = $('.parent')[0].scrollHeight;
$('.overlay').css('height', $parentHeight);
}
UPDATED CSS (only for .modal)
.modal {
width: 200px;
height: 100px;
background: white;
position: absolute;
top: 40px;
}

var scrollMaxValue = $('.child').prop('scrollHeight');
var currentPosition = 0;
$('.overlay').mousewheel(function(e,d) {
e.preventDefault();
if ((d > 0) && (currentPosition > 100)){
currentPosition = currentPosition - (10 * 10)
}
else if((d < 0) &&(currentPosition < scrollMaxValue)){
currentPosition = currentPosition + (10 * 10)
}
$('.child').scrollTop(currentPosition);
});
.parent {
position: relative;
border: solid 3px red;
width: 350px;
height: 200px;
}
.child{
width:100%;
height:100%;
overflow-y: auto;
}
.overlay{
position: absolute;
width:333px;
height:100%;
top:0;
left:0;
background: rgba(0, 0, 0, 0.5);
}
.modal {
position: absolute;
left:20%;
top:25%;
margin:0 auto;
width: 200px;
height: 100px;
background: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus posuere metus eu nisl tempus feugiat. Etiam eu lorem in turpis aliquet interdum eleifend quis orci. Integer egestas urna ac nunc tempus sagittis. Quisque lobortis sem sit amet lorem imperdiet, id dignissim mauris posuere. Etiam condimentum quam a sagittis scelerisque. Donec velit turpis, molestie vitae dui quis, malesuada scelerisque neque. Donec libero lacus, feugiat ut leo id, sollicitudin sodales enim.
Aliquam aliquet pretium blandit. Suspendisse at dapibus dui. Nunc bibendum euismod ipsum, a tempor felis egestas convallis. Pellentesque blandit, mi eget sollicitudin fringilla, est purus sollicitudin nunc, nec suscipit magna tellus eu sem. Praesent eget augue et sapien interdum fringilla vitae vel odio. Duis vel maximus magna. Nam vitae purus vel lacus varius aliquam quis non libero. Duis at orci maximus, dapibus leo eu, varius dui. Vestibulum id nunc ac urna ultrices accumsan. Mauris augue diam, volutpat vel lobortis in, pharetra a ligula. Nulla at consequat velit, non euismod magna. Nam sed metus nec massa eleifend pretium sed id lacus. Suspendisse at semper erat, vitae facilisis ex. Morbi consectetur eget nunc id blandit.
Proin erat dui, varius id urna eget, posuere iaculis leo. Nunc vulputate, est sit amet gravida lobortis, arcu dolor molestie erat, vitae tristique metus libero in dui. Donec vitae orci at lectus gravida pretium. Donec laoreet volutpat ullamcorper. Praesent finibus purus nec metus sagittis, id varius lorem cursus. Nulla vel placerat enim. Pellentesque quis urna sem. Nam blandit lacus et augue imperdiet tincidunt. Sed risus sem, pharetra ac turpis ut, vulputate dictum lacus.
Donec velit ligula, dictum pulvinar faucibus dignissim, porttitor et est. Vivamus pharetra erat eu sem consectetur, et fringilla diam luctus. Phasellus gravida ex neque, eu aliquet leo pulvinar ut. Proin faucibus accumsan ipsum, a aliquam lectus pellentesque a. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec metus neque, eleifend nec ex a, posuere porttitor lacus. Nulla finibus quam nulla, vitae molestie magna maximus ac. In quis felis quis elit fringilla tincidunt quis sed mi. Donec ipsum justo, congue consequat tempus quis, viverra et dolor. Aliquam cursus sapien in libero auctor, et rhoncus purus sodales. Phasellus sapien sapien, consequat id cursus quis, vestibulum vitae metus. Suspendisse ac congue diam.
Sed finibus enim ac magna tincidunt ultrices. Donec nec libero vulputate, congue tortor nec, vehicula ante. Sed consectetur nibh eu quam scelerisque pulvinar. Phasellus ac elementum velit. Curabitur malesuada leo urna, nec dignissim eros mollis eget. In aliquet suscipit nulla sed pulvinar. Morbi pellentesque mi risus, nec aliquam lorem facilisis id. Donec ut quam lorem. Phasellus risus turpis, congue id ultrices vel, pretium at magna. Fusce vestibulum eros sed metus commodo fermentum. Aliquam id rutrum felis. Suspendisse felis metus, imperdiet id pharetra finibus, bibendum at orci. Fusce tristique elementum ex, at iaculis augue. Nullam maximus imperdiet nisi, et dapibus erat dapibus ac. Morbi tincidunt urna et arcu suscipit, id ultricies erat fermentum.
</div>
<div class="overlay">
<div class="modal">
Modal
</div>
</div>
</div>

Override javascript to eliminate flickering

I have two javascript snippets below. They both do the job they're meant to do, except that now clicking .info in the second snippet triggers the classes being added to the body as per the first snippet, causing unwanted flickering. Is it possible to make it so that the second snippet doesn't add or remove classes? Or even combine the two somehow to avoid this issue? Thanks in advance for all help!
I have added the full code below. As you can see, if you click one of the red squares without scrolling down, there is no flicker. Once you scroll down and click on them a flicker occurs.
$(window).scroll(function () {
var elem = $('#object');
var header_height = (window.innerWidth <= 999) ? 50 : 100;
var header_top = elem.offset().top;
var current_top = $(this).scrollTop();
if (current_top > header_height && !elem.hasClass('fixed-object'))
{
elem.addClass('fixed-object');
$('body').addClass('fixed-padding');
}
else if(current_top <= header_height && elem.hasClass('fixed-object'))
{
elem.removeClass('fixed-object');
$('body').removeClass('fixed-padding');
}
});
#charset "UTF-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
body {
background: #F4F5F9;
}
.clear {
clear: both;
}
/*------------------------------------*\
STRUCTURE
\*------------------------------------*/
.wrapper {
max-width: 1020px;
margin: 0 auto;
}
/*------------------------------------*\
MAIN OBJECT DETAILS AREA
\*------------------------------------*/
section#object, section#comparison {
background: #fff;
border-radius: 5px;
box-shadow: 0 10px 30px 0 rgba(0,0,0,0.05);
}
section#object {
min-height: 200px;
border: 1px solid #000;
}
.fixed-object {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 100;
width: 1020px;
margin: 0 auto;
border-radius: 0;
}
section#object {
height:209px;
transition: height 0.2s, width 0.2s;
}
/*------------------------------------*\
CONTENT AREA
\*------------------------------------*/
.info {
width: 17px;
height: 17px;
background: #ff0000;
display: inline-block;
text-indent: 999999px;
overflow: hidden;
background-repeat: no-repeat;
}
.info:hover {
opacity: 0.7;
filter: alpha(opacity=70); /* For IE8 and earlier */
}
.info:active, .info:focus {
opacity: 0.8;
filter: alpha(opacity=80); /* For IE8 and earlier */
}
.infobox {
background: #FFF;
border: 1px solid #000;
width:300px;
z-index: 99;
border-radius: 2px;
padding: 8px 10px;
}
.infobox:after, .infobox:before {
top: 100%;
left: 80%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.infobox:after {
border-color: rgba(255, 255, 255, 0);
border-top-color: #fff;
border-width: 5px;
margin-left: -5px;
}
.infobox:before {
border-color: rgba(0, 0, 0, 0);
border-top-color: #000;
border-width: 6px;
margin-left: -6px;
}
.infobox p {
font-size: 11px;
display: inline-block !Important;
white-space: normal;
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<link type="text/css" rel="stylesheet" href="bug_flicker.css"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<style type="text/css">
.lightbox, .infobox {
display: none;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!--/ HEADER-->
<main>
<div class="wrapper">
<!--MAIN OBJECT-->
<section id="object">
</section>
<!--/ MAIN OBJECT-->
<!--CONTENT-->
<section id="comparison">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra cursus sollicitudin. Läs mer<div class="infobox LB2-box"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ullamcorper scelerisque arcu sed suscipit. Proin sodales enim enim, vitae ullamcorper tellus hendrerit ac.</p></div>Integer dignissim placerat nulla, vitae molestie sem egestas at. Curabitur et mauris nisi. Integer condimentum aliquam risus venenatis cursus. Vestibulum et elit dui. Fusce sed turpis quam. Phasellus sit amet massa semper, maximus augue pulvinar, vulputate lorem. Phasellus luctus augue tortor. Sed semper sapien nec nisl blandit, sed sollicitudin quam sagittis. Praesent auctor dui et neque porta, vitae tempus dui feugiat. Vivamus maximus placerat consectetur. Donec a risus mattis, aliquam velit efficitur, venenatis massa. Etiam pellentesque molestie mi a molestie. Proin finibus lectus ac leo feugiat pretium. Cras tincidunt vel lorem ut vulputate. Quisque sit amet ornare massa.
Suspendisse convallis justo velit, sit amet dictum orci mattis ac. Sed a tellus id massa sagittis faucibus. Aenean molestie justo hendrerit, porta ligula non, iaculis urna. Sed sed quam feugiat, tristique lectus sit amet, posuere ex. Nam faucibus ultrices magna, vel tristique nisi. Nulla erat lectus, accumsan at lobortis ac, semper sit amet justo. Praesent convallis felis turpis, eget auctor libero aliquam semper.
Mauris aliquet diam fringilla ipsum auctor, nec feugiat massa tincidunt. Sed vel facilisis nisi. Suspendisse sit amet orci mattis, aliquet diam vitae, volutpat tortor. Etiam sed imperdiet metus. Nam eget porttitor erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras laoreet semper ultrices. Nunc et libero ligula. Vivamus interdum rutrum mauris. Nullam aliquam pretium nunc et ornare.
Aenean aliquam tempor nisi ut scelerisque. Mauris sagittis tortor lectus, at ornare libero imperdiet quis. Donec rutrum dictum mauris, eu eleifend neque volutpat nec. Vestibulum sodales molestie fringilla. Sed eget quam erat. Integer scelerisque volutpat urna sed convallis. Nunc mollis tempus nunc. Maecenas consequat ligula id neque malesuada, id vulputate eros lobortis. Proin aliquet fringilla massa at placerat. Praesent eu ultrices sem, vitae finibus nibh.
Pellentesque diam neque, ultrices sit amet varius quis, vulputate sed mi. Nunc nibh ante, cursus non aliquam non, iaculis sit amet turpis. Quisque molestie aliquam accumsan. Phasellus a eros neque. Phasellus at erat vel enim gravida bibendum. Nulla vel fermentum nisl. Aliquam lectus odio, elementum vel gravida at, vehicula quis tortor. In vehicula, turpis et ultricies mollis, dolor magna iaculis turpis, eu fringilla nisi nisl a diam. Nullam et pharetra diam. Quisque eleifend leo ac risus cursus, id sollicitudin odio fermentum. Duis mattis mauris erat, eu eleifend enim lobortis id. Fusce ut leo nec nibh dignissim commodo. Pellentesque sagittis, velit vitae pharetra posuere, nunc lorem pulvinar sem, eget mattis tellus odio tempor ante. Praesent a consectetur magna. Phasellus at vestibulum tortor, ut vehicula ligula.
Läs mer<div class="infobox LB2-box"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ullamcorper scelerisque arcu sed suscipit. Proin sodales enim enim, vitae ullamcorper tellus hendrerit ac.</p></div>
Ut tempor rhoncus diam in consectetur. Vestibulum ex lacus, fermentum a gravida et, ultricies eget orci. Maecenas commodo risus eu purus varius hendrerit. Nam ultricies elementum magna quis vulputate. Aenean sit amet porta mauris, a mollis mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam ac fringilla diam. Sed suscipit arcu vel pharetra consequat. Suspendisse blandit dapibus arcu, imperdiet mollis lorem faucibus vitae. Quisque id est et turpis euismod pharetra. Donec tempus scelerisque ullamcorper. Fusce a ipsum a lacus iaculis interdum id non massa. Fusce vestibulum elit a facilisis placerat.
Mauris eros sapien, scelerisque vitae aliquam sed, blandit ut orci. Suspendisse at dui et lectus pretium sagittis. Proin ac mi vel ligula sodales gravida. Nulla ultricies nisl massa, in vulputate massa fringilla at. Etiam id tristique leo. Quisque et mi non elit molestie eleifend et nec risus. Praesent vestibulum vestibulum ante.
Aliquam consectetur risus nec lectus efficitur, non fringilla sem ultricies. Nunc dapibus consequat ante sit amet pharetra. Nulla fermentum purus convallis magna rutrum, venenatis eleifend tellus tristique. Vivamus vel aliquet leo, a venenatis massa. Nunc tincidunt gravida dolor, ut euismod sapien mattis eget. Donec vel justo purus. Morbi rhoncus elementum elit vitae iaculis. Suspendisse imperdiet ex massa, sed sagittis quam pretium in. Donec ut scelerisque dolor. Quisque nec nunc ac tortor dapibus suscipit. Etiam auctor et lectus ac aliquet. Praesent aliquet ultricies ullamcorper. Suspendisse tincidunt lacus nec arcu pharetra, sed malesuada augue commodo. Vestibulum accumsan dui nec lectus posuere blandit. Sed a leo convallis, ullamcorper mauris quis, sodales velit. Suspendisse scelerisque ultricies dictum.
Läs mer<div class="infobox LB2-box"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ullamcorper scelerisque arcu sed suscipit. Proin sodales enim enim, vitae ullamcorper tellus hendrerit ac.</p></div>
Nunc egestas sem ut augue ultricies suscipit. Aenean non pharetra purus. Maecenas nec orci diam. Etiam ultrices luctus velit, nec sagittis sapien. Morbi aliquam magna sed maximus luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum lectus dolor, placerat sit amet sem sed, suscipit ultrices dui. Nulla dictum porta arcu et sodales. Donec dictum fringilla nibh aliquam venenatis. Pellentesque vel sollicitudin erat, et fermentum lorem. Maecenas non mollis arcu, a ullamcorper enim. Phasellus nec vulputate urna. Aenean ac ligula laoreet, vestibulum nisl a, ultrices ligula. Nam at tincidunt mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac tortor porta, porta augue a, eleifend nulla.
Integer laoreet dapibus ligula, sed tincidunt odio. Praesent sed sagittis elit. Donec urna magna, viverra sit amet porttitor vel, aliquam ac risus. Mauris ac fringilla odio, a pellentesque magna. Donec ultrices sapien id felis sollicitudin, sed malesuada leo condimentum. Curabitur sit amet luctus turpis. Praesent ornare enim a finibus posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra cursus sollicitudin. Integer dignissim placerat nulla, vitae molestie sem egestas at. Curabitur et mauris nisi. Integer condimentum aliquam risus venenatis cursus. Vestibulum et elit dui. Fusce sed turpis quam. Phasellus sit amet massa semper, maximus augue pulvinar, vulputate lorem. Phasellus luctus augue tortor. Sed semper sapien nec nisl blandit, sed sollicitudin quam sagittis. Praesent auctor dui et neque porta, vitae tempus dui feugiat. Vivamus maximus placerat consectetur. Donec a risus mattis, aliquam velit efficitur, venenatis massa. Etiam pellentesque molestie mi a molestie. Proin finibus lectus ac leo feugiat pretium. Cras tincidunt vel lorem ut vulputate. Quisque sit amet ornare massa.
Suspendisse convallis justo velit, sit amet dictum orci mattis ac. Sed a tellus id massa sagittis faucibus. Aenean molestie justo hendrerit, porta ligula non, iaculis urna. Sed sed quam feugiat, tristique lectus sit amet, posuere ex. Nam faucibus ultrices magna, vel tristique nisi. Nulla erat lectus, accumsan at lobortis ac, semper sit amet justo. Praesent convallis felis turpis, eget auctor libero aliquam semper.
Mauris aliquet diam fringilla ipsum auctor, nec feugiat massa tincidunt. Sed vel facilisis nisi. Suspendisse sit amet orci mattis, aliquet diam vitae, volutpat tortor. Etiam sed imperdiet metus. Nam eget porttitor erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras laoreet semper ultrices. Nunc et libero ligula. Vivamus interdum rutrum mauris. Nullam aliquam pretium nunc et ornare.
Aenean aliquam tempor nisi ut scelerisque. Mauris sagittis tortor lectus, at ornare libero imperdiet quis. Donec rutrum dictum mauris, eu eleifend neque volutpat nec. Vestibulum sodales molestie fringilla. Sed eget quam erat. Integer scelerisque volutpat urna sed convallis. Nunc mollis tempus nunc. Maecenas consequat ligula id neque malesuada, id vulputate eros lobortis. Proin aliquet fringilla massa at placerat. Praesent eu ultrices sem, vitae finibus nibh.
Pellentesque diam neque, ultrices sit amet varius quis, vulputate sed mi. Nunc nibh ante, cursus non aliquam non, iaculis sit amet turpis. Quisque molestie aliquam accumsan. Phasellus a eros neque. Phasellus at erat vel enim gravida bibendum. Nulla vel fermentum nisl. Aliquam lectus odio, elementum vel gravida at, vehicula quis tortor. In vehicula, turpis et ultricies mollis, dolor magna iaculis turpis, eu fringilla nisi nisl a diam. Nullam et pharetra diam. Quisque eleifend leo ac risus cursus, id sollicitudin odio fermentum. Duis mattis mauris erat, eu eleifend enim lobortis id. Fusce ut leo nec nibh dignissim commodo. Pellentesque sagittis, velit vitae pharetra posuere, nunc lorem pulvinar sem, eget mattis tellus odio tempor ante. Praesent a consectetur magna. Phasellus at vestibulum tortor, ut vehicula ligula.
Ut tempor rhoncus diam in consectetur. Vestibulum ex lacus, fermentum a gravida et, ultricies eget orci. Maecenas commodo risus eu purus varius hendrerit. Nam ultricies elementum magna quis vulputate. Aenean sit amet porta mauris, a mollis mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam ac fringilla diam. Sed suscipit arcu vel pharetra consequat. Suspendisse blandit dapibus arcu, imperdiet mollis lorem faucibus vitae. Quisque id est et turpis euismod pharetra. Donec tempus scelerisque ullamcorper. Fusce a ipsum a lacus iaculis interdum id non massa. Fusce vestibulum elit a facilisis placerat.
Mauris eros sapien, scelerisque vitae aliquam sed, blandit ut orci. Suspendisse at dui et lectus pretium sagittis. Proin ac mi vel ligula sodales gravida. Nulla ultricies nisl massa, in vulputate massa fringilla at. Etiam id tristique leo. Quisque et mi non elit molestie eleifend et nec risus. Praesent vestibulum vestibulum ante.
Aliquam consectetur risus nec lectus efficitur, non fringilla sem ultricies. Nunc dapibus consequat ante sit amet pharetra. Nulla fermentum purus convallis magna rutrum, venenatis eleifend tellus tristique. Vivamus vel aliquet leo, a venenatis massa. Nunc tincidunt gravida dolor, ut euismod sapien mattis eget. Donec vel justo purus. Morbi rhoncus elementum elit vitae iaculis. Suspendisse imperdiet ex massa, sed sagittis quam pretium in. Donec ut scelerisque dolor. Quisque nec nunc ac tortor dapibus suscipit. Etiam auctor et lectus ac aliquet. Praesent aliquet ultricies ullamcorper. Suspendisse tincidunt lacus nec arcu pharetra, sed malesuada augue commodo. Vestibulum accumsan dui nec lectus posuere blandit. Sed a leo convallis, ullamcorper mauris quis, sodales velit. Suspendisse scelerisque ultricies dictum.
Nunc egestas sem ut augue ultricies suscipit. Aenean non pharetra purus. Maecenas nec orci diam. Etiam ultrices luctus velit, nec sagittis sapien. Morbi aliquam magna sed maximus luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum lectus dolor, placerat sit amet sem sed, suscipit ultrices dui. Nulla dictum porta arcu et sodales. Donec dictum fringilla nibh aliquam venenatis. Pellentesque vel sollicitudin erat, et fermentum lorem. Maecenas non mollis arcu, a ullamcorper enim. Phasellus nec vulputate urna. Aenean ac ligula laoreet, vestibulum nisl a, ultrices ligula. Nam at tincidunt mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac tortor porta, porta augue a, eleifend nulla.
Integer laoreet dapibus ligula, sed tincidunt odio. Praesent sed sagittis elit. Donec urna magna, viverra sit amet porttitor vel, aliquam ac risus. Mauris ac fringilla odio, a pellentesque magna. Donec ultrices sapien id felis sollicitudin, sed malesuada leo condimentum. Curabitur sit amet luctus turpis. Praesent ornare enim a finibus posuere.
</section>
<!--/ CONTENT-->
</div>
</main>
</body>
<script>
$('.infobox').hide();
$('a.info').click(function() {
console.log($(this).index('a'));
var $div = $('.infobox').eq($(this).index('a.info'));
$div.toggle();
$('.infobox').not($div).hide();
});
</script>
<script>
$(document).ready(function() {
$(".info").click(function(event){
$('html, body').animate({scrollTop: '+=0px'}, 1);
});
});
</script>
</html>
$(window).scroll(function() {
var elem = $('#object');
var header_height = (window.innerWidth <= 999) ? 50 : 100;
var header_top = elem.offset().top;
var current_top = $(this).scrollTop();
if (current_top > header_height && !elem.hasClass('fixed-object')) {
elem.addClass('fixed-object');
$('body').addClass('fixed-padding');
} else if (current_top <= header_height && elem.hasClass('fixed-object')) {
elem.removeClass('fixed-object');
$('body').removeClass('fixed-padding');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(document).ready(function() {
$(".info").click(function(event) {
$('html, body').animate({
scrollTop: '+=0px'
}, 1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You want to use .preventDefault(). Like so:
$(document).ready(function() {
$(".info").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: '+=0px'
}, 1);
});
});

How to set my navigation at bottom of the mobile screen?

The code i got from this website: click here
But i would like to set this nav code at the bottom instead of the top. I also would like it to stick to the bottom of the mobile screen rather than it disappearing after scrolling. Thank you for all the help if you can offer it to me.
I have looked everywhere and this code is perfect. I don't know much about sticking the nav to the bottom or even this code. Its a little complected but i can understand most of it.
Please if you could provide a snippet or if in case you post the code please provide a little more detail on how to place it because i'll be completely lost if you since a small part of the code with no extra help of where it came from. If could if not thats fine i'll figure it out.
(function() {
'use strict';
var nav = document.querySelector('.fixed-nav');
if(!nav) return true;
var navHeight = 0,
navTop = 0,
scrollCurr = 0,
scrollPrev = 0,
scrollDiff = 0;
window.addEventListener('scroll', function() {
navHeight = nav.offsetHeight;
scrollCurr = window.pageYOffset;
scrollDiff = scrollPrev - scrollCurr;
navTop = parseInt(window.getComputedStyle(nav).getPropertyValue('top')) + scrollDiff;
// Scroll to top: fix navbar to top
if(scrollCurr <= 0)
nav.style.top = '0px';
// Scroll up: show navbar
else if(scrollDiff > 0)
nav.style.top = (navTop > 0 ? 0 : navTop) + 'px';
// Scroll down: hide navbar
else if(scrollDiff < 0) {
nav.style.top = (Math.abs(navTop) > navHeight ? - navHeight : navTop) + 'px';
}
// Note last scroll position
scrollPrev = scrollCurr;
});
}());
.fixed-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #ddd;
white-space: nowrap;
height: 50px;
box-sizing: border-box;
padding: 10px;
box-shadow: 0px 3px 6px rgba(0,0,0,0.16),0px 3px 6px rgba(0,0,0,0.23);
}
.fixed-nav ul, .fixed-nav li {
display:inline;
}
.fixed-nav a {
text-decoration: none;
text-transform: uppercase;
padding: 17px 10px;
color: #333;
font-family: arial;
}
.fixed-nav a:hover {
background-color: #000;
color: #eee;
}
.fixed-nav ul {
padding:0;
}
.fixed-nav img {
vertical-align: middle;
}
main {margin-top:55px;}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<nav class="fixed-nav">
<img src="mf-logo.svg" height="30" />
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</nav>
<main>
<!-- Some dummy content so we can see the fixed navbar staying fixed when we scroll -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rutrum dapibus erat eget sodales. Quisque at maximus tellus. Duis tristique mi magna, ut efficitur lectus porttitor non. Ut bibendum diam turpis, eget vehicula urna dignissim in. Vestibulum eget massa neque. Nulla facilisi. Pellentesque faucibus rutrum eros ut vestibulum. Proin ut nisl malesuada eros auctor viverra non et nibh. Phasellus a felis molestie, fermentum nunc ut, tincidunt felis. Nam quis fermentum velit. Fusce condimentum vehicula porttitor. Aliquam sagittis faucibus urna ac lacinia. Praesent id porta dolor. Donec a pulvinar dui, quis malesuada risus. Cras semper venenatis augue.</p>
<p>Nam molestie eget nulla sit amet hendrerit. Morbi vulputate commodo est, in elementum turpis luctus at. Integer velit urna, tincidunt in aliquam eget, pulvinar in odio. In pharetra sapien mauris, ac sagittis leo venenatis eget. Integer laoreet turpis ac sollicitudin placerat. Curabitur non aliquet massa. Morbi non volutpat enim. Etiam non placerat arcu. In non tellus tempus, consectetur leo ultrices, tincidunt eros. Cras euismod volutpat erat, eget rutrum orci vestibulum sit amet. Mauris eu dui purus. Aliquam condimentum varius nibh, eget consequat nibh commodo non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vestibulum risus purus, a accumsan massa semper sed. Fusce sit amet est suscipit, consectetur ex sit amet, congue sem.</p>
<p>Etiam blandit magna felis, ac iaculis purus auctor eget. Morbi eleifend, mi a fringilla cursus, dolor erat placerat magna, consectetur imperdiet turpis felis in ante. In ut velit ut eros venenatis consectetur in sed justo. Phasellus posuere, nulla sit amet iaculis cursus, enim mi tincidunt tellus, id auctor eros velit id massa. Suspendisse rutrum vel magna at gravida. Nulla commodo hendrerit lorem, sit amet volutpat massa tristique nec. In accumsan diam ac risus luctus varius. Etiam aliquet, quam eu efficitur eleifend, mi lacus tincidunt neque, at egestas lacus felis quis purus. Aenean lobortis nisi a finibus eleifend. Suspendisse euismod, sapien at viverra aliquam, mauris tortor blandit tortor, fringilla tempor eros urna vitae ligula. Aliquam erat volutpat.</p>
<p>Donec vulputate ex ut risus ullamcorper molestie. Proin interdum, augue ut gravida placerat, quam ipsum maximus neque, pretium semper tellus eros vitae leo. Donec eu eleifend metus. In et urna lacinia urna vulputate faucibus ullamcorper vel erat. Duis vehicula aliquet libero, non convallis erat hendrerit et. Proin ornare pretium pulvinar. Suspendisse potenti. Vestibulum varius magna id lectus finibus mattis. Quisque nulla eros, elementum a dictum quis, tempor et libero. Aenean sollicitudin tellus elit, at lobortis ex tempor ut. Maecenas ac tincidunt enim, vitae tempor nibh. Maecenas malesuada egestas orci, facilisis malesuada metus bibendum a. Aliquam erat volutpat.</p>
<p>Fusce tempor eu quam non rutrum. Donec at nibh erat. Integer congue nisl a aliquet porttitor. Aliquam luctus rutrum metus vitae iaculis. Maecenas rhoncus feugiat massa vel commodo. Aliquam dignissim consectetur lacinia. Quisque finibus nibh nec est lobortis hendrerit. Vivamus ut ex id metus pellentesque lacinia non id ligula. Maecenas non tortor lobortis, fringilla velit sed, lobortis leo. </p>
</main>

How can I make my sidebar fixed after a certain size?

I see this sample:
link
If you do come down ... you see the sidebar on the right becomes fixed after a certain size ... you actually get down to almost everything.
How it was made an event the example?
With JQuery?
This is the link to my site
I tried to do something similar but incomplete
CODE JS:
$(window).scroll(function() {
var height = $(window).scrollTop();
console.log(height);
if(height > 700) {
//alert("test");
//after a certain size should be fixed ... what code should be here?
}
});
Did you have any idea as an example?
Can you help me solve this problem please?
Thanks in advance!

Here the example of not smooth scrolling of div.
(function($) {
var element = $('.follow-scroll'),
originalY = element.offset().top;
// Space between element and top of screen (when scrolling)
var topMargin = 20;
// Should probably be set in CSS; but here just for emphasis
element.css('position', 'relative');
$(window).on('scroll', function(event) {
var scrollTop = $(window).scrollTop();
element.stop(false, false).animate({
top: scrollTop < originalY
? 0
: scrollTop - originalY + topMargin
}, 0);
});
})(jQuery);
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
.group:after { content: ""; display: table; clear: both; }
body { font: 15px/20px sans-serif; color: #444; }
p { margin-bottom: 30px; }
.wrapper { width: 100%; max-width: 700px; padding: 3%; }
.content, .sidebar { float: left; }
.content { width: 68%; margin-right: 5%; }
.sidebar { width: 27%; }
.box { background: #eee; border: 1px solid #ccc; padding: 10px; margin-bottom: 20px; }
<div class="wrapper group">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam euismod arcu ut diam maximus auctor. Sed malesuada maximus tellus, dignissim volutpat urna hendrerit at. Cras nisi turpis, mattis vitae ornare ut, bibendum et massa. Nulla at tellus a arcu luctus ultrices ac non felis. Maecenas euismod efficitur ipsum vel vestibulum. Nam imperdiet ipsum nunc, sit amet varius felis maximus quis. Etiam efficitur, mauris placerat luctus facilisis, ligula sem pellentesque nunc, ac viverra tellus velit sit amet purus. Proin a nunc id quam tempor blandit vitae id orci. Cras lectus turpis, varius nec elementum venenatis, suscipit ut nisl.</p>
<p>Nulla condimentum est in leo mollis, sit amet varius erat pulvinar. Donec posuere turpis non est ultrices lobortis. Donec commodo aliquam sodales. Ut id finibus velit. Aenean tempus eget nulla at condimentum. Ut a arcu quis dui ultricies efficitur. Vestibulum suscipit diam ullamcorper velit tempor, in ullamcorper odio sollicitudin. Vestibulum congue nisl nibh, ut elementum quam tristique non. Nulla in sollicitudin dolor. Morbi ac justo nulla. Suspendisse massa neque, vestibulum id dolor non, congue rhoncus nibh.</p>
<p>Phasellus porta tellus vel ipsum vehicula, nec fermentum lectus porta. Aenean viverra magna eu risus lacinia malesuada. Sed molestie auctor pharetra. Aliquam erat volutpat. Vestibulum in mi a orci tincidunt pellentesque. Sed et lectus eros. Nam imperdiet neque eu dolor gravida, interdum pellentesque justo rhoncus. Morbi tincidunt, ex nec pellentesque pulvinar, dui nulla tempor ipsum, sed consequat est tortor at neque. Suspendisse sed consequat urna. Nullam luctus, sem convallis volutpat mollis, sapien odio finibus elit, vitae fringilla enim leo sed velit. Vivamus fringilla ante laoreet blandit porta. Sed condimentum ut erat nec dignissim.</p>
<p>Morbi ac scelerisque metus. Donec rhoncus diam urna, nec aliquet ex mollis ut. Sed a arcu ac risus semper pellentesque ut non nibh. Phasellus eu ullamcorper sem. Maecenas at tortor faucibus, consequat risus sed, egestas sapien. Suspendisse tortor lacus, congue sed velit vel, dictum sagittis eros. Proin eu nisl viverra, mattis velit vitae, tempor turpis. Ut sodales lacus in iaculis faucibus. Integer non metus non nulla malesuada rutrum ac non ipsum. Vivamus quam diam, suscipit sed velit vel, tincidunt imperdiet urna. Praesent dapibus augue a dignissim lacinia. Nullam pharetra volutpat ligula, quis aliquet mauris pharetra nec. Etiam finibus, neque in laoreet vehicula, lorem justo feugiat velit, ac accumsan neque lacus non tellus. Aliquam quis sagittis massa, a bibendum enim.</p>
<p>Morbi vel elementum libero, vitae viverra est. Pellentesque sollicitudin neque at ligula suscipit, vel faucibus mauris consequat. Donec quis pharetra nulla, at tristique lacus. Nunc vel magna ultricies, hendrerit purus et, rhoncus dolor. Aliquam erat volutpat. Phasellus auctor malesuada augue, a iaculis sem mattis quis. Nulla facilisi.</p>
</div>
<div class="sidebar">
<div class="box">
First box
</div>
<div class="box">
Second box
</div>
<div class="box follow-scroll">
Third box (follows screen)
</div>
</div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.