We Keep Coding

Fixed position element contained inside of container div of variable height

I am trying to make an element(social links) 'fixed' inside of a container div(blog post) that varies in height and doesn't continue past the container. So relative to the container div, not the window itself. If the Footer/Header are 500px in height, the social links span can overflow the blog container div. I would like it to snap to the top or bottom of the container div, only scrolling within.
example: https://jsfiddle.net/j8ayod1v/6/
<header></header>
<div class="blog-container">
<span class="social-links"></span>
</div>
<footer></footer>

You could try setting the position as sticky or absolute on the element you want to remain "fixed" within the grey container depending on the behavior you're looking for.
I added both below:
header {
background: red;
height: 100px;
}
footer {
background: red;
height: 300px;
}
article {
position: relative;
background: grey;
}
h1 {
padding: 10px 40px;
}
p {
padding: 10px 40px;
}
span {
background: green;
top: 0;
}
.sticky {
position: -webkit-sticky;
position: sticky;
float: left;
}
.absolute {
position: absolute;
right: 0;
}
<header>
</header>
<article>
<span class="sticky">Fixed (sticky)</span>
<span class="absolute">Fixed (absolute)</span>
<h1>Blog Post</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar finibus dolor, quis commodo lacus tristique in. Donec mattis massa volutpat, tristique lacus id, aliquam dolor. Mauris sed imperdiet lacus. Sed vitae cursus enim. Mauris lacinia lectus commodo nunc sodales pellentesque. Proin luctus commodo mi, vestibulum tempor elit. Praesent in dolor eleifend ante rutrum ultrices in eu nibh.
Nullam scelerisque lobortis diam, lobortis accumsan nunc molestie ac. Curabitur quis lorem id neque egestas scelerisque vitae id tellus. Morbi convallis, ante id viverra sagittis, lorem neque viverra eros, in finibus lorem purus id velit. Vivamus vitae nunc id nunc condimentum fringilla. Vivamus elementum semper mattis. Sed et porttitor lorem. Vivamus egestas hendrerit nisi, vitae sodales turpis molestie eget. Aliquam erat volutpat. Proin augue ante, dignissim ac nisi ac, blandit laoreet elit.
Donec feugiat leo suscipit diam pharetra efficitur. Curabitur augue sapien, pretium eu congue a, iaculis in tortor. Morbi nec sapien et elit venenatis pulvinar. Ut nec arcu egestas, dignissim enim sit amet, condimentum nulla. Morbi nisi nunc, interdum quis elementum id, vehicula vel risus. Sed eu sem ut eros euismod condimentum ac vel arcu. Duis gravida mattis sem, in porttitor ligula.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec maximus augue at nunc hendrerit, nec lobortis libero tincidunt. Mauris at viverra dolor. Praesent sed dolor ut nibh ultrices rutrum. Vestibulum aliquam, quam nec euismod dignissim, ipsum neque semper arcu, eu fringilla nibh velit ut tortor. Curabitur molestie enim vitae accumsan venenatis. Nullam sit amet turpis enim. In tincidunt nisl et nisi posuere, in semper massa fermentum. Phasellus sodales justo ac mauris malesuada, non aliquam mauris ultricies. Curabitur vel neque non augue pulvinar consequat. Duis quis elit sodales, tincidunt ipsum sed, ullamcorper tellus. Fusce sed felis euismod, aliquam lacus eget, blandit turpis. Vivamus sapien elit, gravida ac rhoncus eget, interdum nec velit. Praesent quis velit in ex aliquet cursus vitae sit amet metus. Aliquam molestie enim vitae mauris ornare, non ullamcorper augue lacinia.
Donec consectetur id justo quis aliquam. Fusce sollicitudin turpis ligula. Etiam vel viverra tellus. Curabitur eu cursus nisi. Morbi euismod maximus malesuada. Donec condimentum, orci quis fermentum tempor, turpis enim tincidunt enim, ac posuere nisl nisl non ipsum. Aliquam iaculis risus a urna molestie auctor. Suspendisse ac lorem dui. In hac habitasse platea dictumst. Quisque risus nisl, tempus et nunc id, dictum mattis erat. Nulla pulvinar lectus ac turpis sagittis porttitor. Duis sed bibendum est, ut tincidunt eros. Donec eleifend rutrum turpis nec luctus. Maecenas auctor, libero quis dictum dictum, odio lorem cursus metus, sed viverra nulla tortor ut lorem. Ut at mattis augue, sit amet consequat elit. Quisque vehicula nulla et suscipit facilisis.
</p>
</article>
<footer>
</footer>

Is this what you need?
header {
background: red;
height: 500px;
}
footer {
background: red;
height: 500px;
}
article {
position: relative;
background: grey;
}
h1 {
padding: 10px 40px;
}
p {
padding: 10px 40px;
}
span {
background: green;
position: sticky;
top:0;
}
<header>
</header>
<article>
<span>Fixed</span>
<h1>Blog Post</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar finibus dolor, quis commodo lacus tristique in. Donec mattis massa volutpat, tristique lacus id, aliquam dolor. Mauris sed imperdiet lacus. Sed vitae cursus enim. Mauris lacinia lectus commodo nunc sodales pellentesque. Proin luctus commodo mi, vestibulum tempor elit. Praesent in dolor eleifend ante rutrum ultrices in eu nibh.
Nullam scelerisque lobortis diam, lobortis accumsan nunc molestie ac. Curabitur quis lorem id neque egestas scelerisque vitae id tellus. Morbi convallis, ante id viverra sagittis, lorem neque viverra eros, in finibus lorem purus id velit. Vivamus vitae nunc id nunc condimentum fringilla. Vivamus elementum semper mattis. Sed et porttitor lorem. Vivamus egestas hendrerit nisi, vitae sodales turpis molestie eget. Aliquam erat volutpat. Proin augue ante, dignissim ac nisi ac, blandit laoreet elit.
Donec feugiat leo suscipit diam pharetra efficitur. Curabitur augue sapien, pretium eu congue a, iaculis in tortor. Morbi nec sapien et elit venenatis pulvinar. Ut nec arcu egestas, dignissim enim sit amet, condimentum nulla. Morbi nisi nunc, interdum quis elementum id, vehicula vel risus. Sed eu sem ut eros euismod condimentum ac vel arcu. Duis gravida mattis sem, in porttitor ligula.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec maximus augue at nunc hendrerit, nec lobortis libero tincidunt. Mauris at viverra dolor. Praesent sed dolor ut nibh ultrices rutrum. Vestibulum aliquam, quam nec euismod dignissim, ipsum neque semper arcu, eu fringilla nibh velit ut tortor. Curabitur molestie enim vitae accumsan venenatis. Nullam sit amet turpis enim. In tincidunt nisl et nisi posuere, in semper massa fermentum. Phasellus sodales justo ac mauris malesuada, non aliquam mauris ultricies. Curabitur vel neque non augue pulvinar consequat. Duis quis elit sodales, tincidunt ipsum sed, ullamcorper tellus. Fusce sed felis euismod, aliquam lacus eget, blandit turpis. Vivamus sapien elit, gravida ac rhoncus eget, interdum nec velit. Praesent quis velit in ex aliquet cursus vitae sit amet metus. Aliquam molestie enim vitae mauris ornare, non ullamcorper augue lacinia.
Donec consectetur id justo quis aliquam. Fusce sollicitudin turpis ligula. Etiam vel viverra tellus. Curabitur eu cursus nisi. Morbi euismod maximus malesuada. Donec condimentum, orci quis fermentum tempor, turpis enim tincidunt enim, ac posuere nisl nisl non ipsum. Aliquam iaculis risus a urna molestie auctor. Suspendisse ac lorem dui. In hac habitasse platea dictumst. Quisque risus nisl, tempus et nunc id, dictum mattis erat. Nulla pulvinar lectus ac turpis sagittis porttitor. Duis sed bibendum est, ut tincidunt eros. Donec eleifend rutrum turpis nec luctus. Maecenas auctor, libero quis dictum dictum, odio lorem cursus metus, sed viverra nulla tortor ut lorem. Ut at mattis augue, sit amet consequat elit. Quisque vehicula nulla et suscipit facilisis.
</p>
</article>
<footer>
</footer>

jQuery to Javascript/Vue

I want to create a custom search box that can jump to its matches using mark.js mark.js web page.
They do have an example here:
https://jsfiddle.net/julmot/973gdh8g/
But it is written using jQuery.
I tried converting it to JS/Vue (using Quasar), but now I couldn't get it to work.
No errors, but also no highlights.
I have updated jQuery lines like:
$prevBtn = $("button[data-search='prev']")
to:
prevBtn = document.querySelector('#prev')
And these, I dont know how to convert the others, such as:
$nextBtn.add($prevBtn).on("click", function() {})
Here is my fiddle (simplified version, but not completely done yet, also make sure to click "Search" after input):
https://codepen.io/keechan/pen/JjWEYmP?editors=1111
What am I missing? Help please!

I rewrote their jQuery example using pure JavaScript.
You should be able to compare the two examples to see how the various jQuery functions translate to JavaScript and then implement them into your Vue project.
https://jsfiddle.net/75qyu3j8/
I tried to keep the variable names the same so it is easier to understand.
document.body.onload = function() {
// the input field
var $input = document.querySelector("input[type='search']"),
// clear button
$clearBtn = document.querySelector("button[data-search='clear']"),
// prev button
$prevBtn = document.querySelector("button[data-search='prev']"),
// next button
$nextBtn = document.querySelector("button[data-search='next']"),
// the context where to search
$content = document.querySelector(".content"),
$contentMark = new Mark($content),
// jQuery object to save <mark> elements
$results,
// the class that will be appended to the current
// focused element
currentClass = "current",
// top offset for the jump (the search bar)
offsetTop = 50,
// the current index of the focused element
currentIndex = 0;
/**
* Jumps to the element matching the currentIndex
*/
function jumpTo() {
if ($results.length) {
var position,
$current = $results[currentIndex];
$results.forEach($result => $result.classList.remove(currentClass));
if ($current) {
$current.classList.add(currentClass);
position = $current.offsetTop - offsetTop;
window.scrollTo(0, position);
}
}
}
/**
* Searches for the entered keyword in the
* specified context on input
*/
$input.addEventListener("input", function() {
var searchVal = this.value;
$contentMark.unmark({
done: function() {
$contentMark.mark(searchVal, {
separateWordSearch: true,
done: function() {
$results = $content.querySelectorAll("mark");
currentIndex = 0;
jumpTo();
}
});
}
});
});
/**
* Clears the search
*/
$clearBtn.addEventListener("click", function() {
$contentMark.unmark();
$input.value = ""
$input.focus();
});
/**
* Next and previous search jump to
*/
$nextBtn.after($prevBtn);
function prevNextHandler() {
if ($results.length) {
currentIndex += (this.dataset.search === "prev" ? -1 : 1);
if (currentIndex < 0) {
currentIndex = $results.length - 1;
}
if (currentIndex > $results.length - 1) {
currentIndex = 0;
}
jumpTo();
}
}
$nextBtn.addEventListener("click", prevNextHandler);
$prevBtn.addEventListener("click", prevNextHandler);
};
mark {
background: yellow;
}
mark.current {
background: orange;
}
.header {
padding: 10px;
width: 100%;
background: #eee;
position: fixed;
top: 0;
left: 0;
}
.content {
margin-top: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script>
<div class="header">
Search:
<input type="search" placeholder="Lorem">
<button data-search="next">↓</button>
<button data-search="prev">↑</button>
<button data-search="clear">✖</button>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu ullamcorper orci, eget porttitor justo. Aliquam id sollicitudin elit. Nulla in sodales ipsum. Donec vulputate venenatis magna. Vestibulum sit amet leo lacinia, cursus lectus in, gravida
metus. In ultricies sed tortor non pellentesque. Mauris quis tempor neque. Donec nec sagittis magna. Integer fringilla posuere metus eu mollis. Ut ac porta metus. Duis sed lacinia metus. Nunc malesuada iaculis risus vitae bibendum.
</p>
<p>
Vivamus posuere condimentum leo eu hendrerit. Pellentesque placerat iaculis ante a rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu ipsum ac magna congue congue sed maximus tortor. Vivamus id odio elementum, vehicula nunc
ut, efficitur felis. Nullam hendrerit velit libero, gravida porttitor tortor ullamcorper eu. Ut ut lectus non enim sagittis aliquam quis in orci. Donec a arcu eu eros cursus cursus. Donec dictum dignissim tellus, dictum egestas purus pellentesque
sed.
</p>
<p>
Vestibulum eu ornare urna, nec aliquam lectus. Phasellus eu odio sapien. Vestibulum eu turpis at lorem sagittis posuere. Quisque tellus nunc, facilisis id lacus nec, ornare rhoncus elit. Vivamus vehicula eros a condimentum venenatis. Sed orci massa, pulvinar
sed erat nec, pellentesque suscipit leo. Mauris lobortis tincidunt nunc, sed tempus ex congue vitae. Curabitur lobortis mauris in ex malesuada, quis vehicula neque lobortis. Curabitur aliquam porttitor tellus eget tempus. Donec maximus tempus tristique.
Aliquam tincidunt odio dictum, scelerisque ipsum ut, facilisis quam. Ut nec malesuada neque.
</p>
<p>
Proin felis eros, tincidunt vitae scelerisque sit amet, dictum nec ante. Praesent tincidunt ac lacus nec elementum. Vivamus sed gravida purus, sed efficitur tortor. Nulla non molestie arcu. Sed tincidunt consectetur ligula sed lobortis. In non sapien
ac urna lacinia placerat sed nec lacus. Aenean lobortis tincidunt sapien a hendrerit. Quisque eu turpis accumsan nisl blandit efficitur.
</p>
<p>
Nam sit amet pellentesque est. Sed ligula turpis, ultricies sit amet mattis elementum, tristique non risus. Phasellus at congue ex. Proin nisi leo, vestibulum vitae accumsan in, imperdiet id dolor. Quisque at blandit nisl. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc eget metus augue. Morbi faucibus venenatis sapien, fermentum porttitor felis pharetra a. Nam interdum nibh tortor, quis maximus turpis blandit eget. Praesent in feugiat neque, sed
vulputate quam. Curabitur erat quam, efficitur et congue quis, iaculis euismod libero. Quisque odio sapien, efficitur non mauris ac, tincidunt condimentum turpis.
</p>
<p>
Maecenas dapibus aliquam vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent convallis viverra leo quis porta. Sed sit amet porttitor quam. Fusce nec risus non augue consectetur ultricies. Aliquam
elit lorem, tincidunt ac dolor vel, vulputate consectetur ex. In hac habitasse platea dictumst. Sed eget nisl aliquam, cursus odio nec, commodo lorem. Nulla mollis tortor eu odio rutrum vulputate. Donec condimentum molestie mauris, nec sodales nisi
volutpat aliquam. Nulla mollis libero sed nibh volutpat, ac mollis elit tincidunt. Vestibulum cursus velit vitae felis aliquam ultricies. Donec vehicula dictum feugiat. Vestibulum volutpat sollicitudin sagittis.
</p>
<p>
Aliquam consequat, diam eu ullamcorper porta, diam eros rhoncus turpis, in rutrum sem diam a risus. Duis lacinia velit sed ante feugiat venenatis. Aenean orci leo, dictum non finibus nec, dignissim quis eros. Nullam sit amet orci ac purus blandit commodo
sit amet eget neque. Sed pellentesque dictum tortor. Ut dui erat, tempus in odio in, aliquet convallis mi. Morbi efficitur justo ante, quis ultricies turpis suscipit ac. Sed sit amet nisl rutrum, laoreet mauris id, ullamcorper orci. In facilisis nisi
eget fringilla imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi ut ultricies dui. Pellentesque elit urna, imperdiet sed congue eget, hendrerit sed urna.
</p>
<p>
Proin vel hendrerit nulla. Vivamus vehicula nibh nec lorem blandit, quis aliquam ipsum suscipit. Nulla at vestibulum felis. Aenean ac nibh eget enim molestie pulvinar. Duis nulla justo, tristique id nulla nec, faucibus imperdiet arcu. In vel pretium dui,
at lobortis sapien. Phasellus ullamcorper id enim eget dictum. Ut imperdiet rutrum est a rutrum. Curabitur eget dignissim tellus. Fusce tempus leo nisl, vitae auctor diam feugiat sit amet. Vestibulum accumsan justo eget odio imperdiet, consectetur
efficitur ex dapibus.
</p>
<p>
Sed pharetra odio a nibh pharetra rutrum. Suspendisse ut ullamcorper lectus. Donec ipsum mauris, congue et lobortis sit amet, ultricies ac tellus. Sed nisi risus, condimentum at varius quis, condimentum ac velit. In condimentum, magna sed ornare eleifend,
dolor nulla mollis felis, quis feugiat elit turpis non ipsum. Etiam aliquam est imperdiet dolor rutrum, at varius leo sodales. Morbi quis iaculis metus.
</p>
<p>
Maecenas auctor nec ligula ac luctus. Nam sit amet euismod mauris. Donec et diam sit amet eros efficitur tempor. Mauris non erat sit amet nunc interdum pulvinar. Sed luctus hendrerit justo eget pulvinar. Cras non arcu sed ligula faucibus pulvinar. Sed
egestas risus nisl. Duis quis arcu tempus, cursus erat ac, gravida enim. Cras et condimentum ante. Nullam eleifend egestas velit, quis semper est imperdiet non. Donec quis purus varius, placerat mi et, dictum lorem. Sed quis finibus nisi, vitae molestie
metus. Donec lobortis eros quis vestibulum vulputate.
</p>
</div>

Create fixed left column while right column continues scrolling

I've seen this on many websites where upon scroll one element becomes fixed while the elements next to it continue to scroll. I would like to understand how this works.
I created a pen for this: https://codepen.io/lisaschumann/pen/WNoJBbb where the left column is meant to be fixed when the right column starts to scroll. What am I missing here?
I used jQuery Code I had found on the issue, but ideally I would like to create this with JS.
CSS, jQuery and HTML:
var fixmeTop = $('.fixme').offset().top; // get initial position of the element
$(window).scroll(function () { // assign scroll event listener
var currentScroll = $(window).scrollTop(); // get current position
if (currentScroll >= fixmeTop) { // apply position: fixed if you
$('.fixme').css({ // scroll to that element or below it
position: 'fixed',
top: '0',
left: '0'
});
} else { // apply position: static
$('.fixme').css({ // if you scroll above it
position: 'static'
});
}
});
* {
box-sizing: border-box;
}
/* Set additional styling options for the columns*/
.column {
float: left;
width: 50%;
}
.row:after {
content: "";
display: table;
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body style="margin: 0;;">
<div style="padding: 20px;">
<h1> Test</h1>
<div class="row">
<div class="column" style="height: 300px;">
<div class="fixme" style="background-color: red; border: 1px solid black; color: white; padding: 20px;">
<h2 style="margin:0 0 10px 0;">Headline</h2>
<span>Additional Info</span>
</div>
</div>
<div style="height: 2000px; background-color: blue; border: 1px solid black; color: white; padding: 20px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu vitae elementum curabitur vitae nunc sed velit. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Eget mauris pharetra et ultrices neque ornare. Scelerisque eu ultrices vitae auctor eu. Aliquam vestibulum morbi blandit cursus risus at. Amet nisl purus in mollis nunc. Nunc faucibus a pellentesque sit amet porttitor eget. Aliquet bibendum enim facilisis gravida neque convallis a. Egestas congue quisque egestas diam. Leo in vitae turpis massa sed elementum tempus egestas. Ultricies lacus sed turpis tincidunt id aliquet risus. Lectus vestibulum mattis ullamcorper velit. Laoreet id donec ultrices tincidunt arcu. Ipsum consequat nisl vel pretium lectus quam id leo in. Mauris rhoncus aenean vel elit scelerisque mauris. Massa tincidunt dui ut ornare lectus sit amet est. Magna etiam tempor orci eu lobortis. Proin libero nunc consequat interdum varius sit. Urna duis convallis convallis tellus id interdum.
<br>
Amet nisl suscipit adipiscing bibendum est ultricies. Vitae et leo duis ut diam quam nulla. Ac tortor vitae purus faucibus ornare suspendisse sed nisi. Quam quisque id diam vel quam elementum pulvinar etiam non. Senectus et netus et malesuada fames ac turpis egestas sed. Lectus nulla at volutpat diam ut venenatis. Augue ut lectus arcu bibendum at varius vel pharetra vel. Sed vulputate mi sit amet mauris. Eu ultrices vitae auctor eu. Elementum sagittis vitae et leo duis ut diam. Imperdiet dui accumsan sit amet nulla facilisi morbi tempus iaculis. Erat pellentesque adipiscing commodo elit at imperdiet. Massa vitae tortor condimentum lacinia quis. Dui accumsan sit amet nulla facilisi morbi.
<br>
Orci eu lobortis elementum nibh tellus molestie nunc non. Gravida in fermentum et sollicitudin. Elementum curabitur vitae nunc sed velit dignissim sodales. Ipsum dolor sit amet consectetur. Tortor consequat id porta nibh. Cursus mattis molestie a iaculis at erat pellentesque adipiscing commodo. Convallis posuere morbi leo urna molestie. Massa placerat duis ultricies lacus sed turpis. Diam volutpat commodo sed egestas egestas. Nec ullamcorper sit amet risus nullam eget felis eget. Cursus vitae congue mauris rhoncus aenean. Quis lectus nulla at volutpat diam ut. Convallis aenean et tortor at risus.
<br>
Convallis convallis tellus id interdum velit laoreet id donec. Laoreet non curabitur gravida arcu ac tortor dignissim convallis aenean. Sed odio morbi quis commodo. Feugiat in fermentum posuere urna nec. Elementum facilisis leo vel fringilla est ullamcorper. Pellentesque diam volutpat commodo sed egestas egestas. Ac tortor dignissim convallis aenean et tortor. Nunc eget lorem dolor sed viverra ipsum. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. Morbi leo urna molestie at elementum. Nisl purus in mollis nunc sed. Volutpat blandit aliquam etiam erat. Vel turpis nunc eget lorem dolor sed. Neque ornare aenean euismod elementum nisi quis eleifend. Habitant morbi tristique senectus et netus et. Non pulvinar neque laoreet suspendisse interdum consectetur. Congue eu consequat ac felis donec et odio pellentesque. Volutpat odio facilisis mauris sit amet.
<br>
Pellentesque habitant morbi tristique senectus et netus et malesuada. In ornare quam viverra orci sagittis. Mauris cursus mattis molestie a iaculis at. Morbi blandit cursus risus at ultrices mi tempus imperdiet. Interdum velit laoreet id donec. Tortor pretium viverra suspendisse potenti nullam ac tortor. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Ut sem viverra aliquet eget sit amet tellus. Ut aliquam purus sit amet luctus venenatis lectus magna fringilla. Turpis nunc eget lorem dolor. Lobortis feugiat vivamus at augue eget arcu dictum varius duis. Sit amet dictum sit amet justo donec enim diam. Neque viverra justo nec ultrices dui. Felis imperdiet proin fermentum leo vel. Egestas quis ipsum suspendisse ultrices gravida dictum fusce ut placerat.
<br>
Vestibulum morbi blandit cursus risus at ultrices mi tempus imperdiet. Lacus suspendisse faucibus interdum posuere. Vulputate dignissim suspendisse in est ante in nibh mauris cursus. Gravida rutrum quisque non tellus orci ac auctor augue mauris. Amet aliquam id diam maecenas ultricies mi eget. Libero volutpat sed cras ornare arcu dui vivamus. Vel pharetra vel turpis nunc eget lorem dolor sed viverra. Et netus et malesuada fames. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Ipsum dolor sit amet consectetur. Consectetur purus ut faucibus pulvinar elementum integer. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Semper eget duis at tellus. Congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Eget arcu dictum varius duis at consectetur lorem donec. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Nullam eget felis eget nunc lobortis mattis.
<br>
Venenatis lectus magna fringilla urna. Lorem mollis aliquam ut porttitor. Id diam maecenas ultricies mi eget mauris. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus est. Tincidunt lobortis feugiat vivamus at augue eget arcu dictum varius. Tincidunt eget nullam non nisi est sit amet facilisis. Felis donec et odio pellentesque diam. Nullam ac tortor vitae purus. Dictum at tempor commodo ullamcorper a lacus. Diam maecenas sed enim ut sem viverra aliquet eget. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Ac felis donec et odio pellentesque diam volutpat commodo. Facilisis volutpat est velit egestas dui.
<br>
Vel orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Quam quisque id diam vel quam elementum pulvinar etiam non. Amet massa vitae tortor condimentum lacinia quis vel eros. Maecenas pharetra convallis posuere morbi leo urna molestie. Mattis rhoncus urna neque viverra justo nec ultrices dui sapien. Ante metus dictum at tempor commodo ullamcorper a lacus. Dui faucibus in ornare quam viverra orci sagittis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Tincidunt nunc pulvinar sapien et. Sed adipiscing diam donec adipiscing tristique risus nec. Dolor morbi non arcu risus quis varius quam quisque id. Morbi quis commodo odio aenean.
<br>
Dolor sit amet consectetur adipiscing. Aliquet nec ullamcorper sit amet risus nullam eget felis. Tristique magna sit amet purus. Ut venenatis tellus in metus vulputate. Sollicitudin tempor id eu nisl nunc mi. Auctor augue mauris augue neque gravida in. Et malesuada fames ac turpis egestas integer eget aliquet nibh. Nisl suscipit adipiscing bibendum est ultricies integer quis auctor elit. Aliquam purus sit amet luctus venenatis lectus. Eget mauris pharetra et ultrices neque ornare. Congue eu consequat ac felis. Lacus viverra vitae congue eu consequat ac felis donec et.
<br>
Tempus iaculis urna id volutpat lacus laoreet. Quis commodo odio aenean sed adipiscing diam. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Blandit massa enim nec dui nunc mattis enim. Sem integer vitae justo eget magna fermentum iaculis eu non. Ut tortor pretium viverra suspendisse potenti. Pharetra sit amet aliquam id diam maecenas ultricies mi eget. Ut tristique et egestas quis. Ut enim blandit volutpat maecenas volutpat. Magna eget est lorem ipsum. Ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget. Cum sociis natoque penatibus et magnis dis. Nisi quis eleifend quam adipiscing vitae. Odio euismod lacinia at quis risus. Dignissim sodales ut eu sem integer. Arcu ac tortor dignissim convallis aenean et tortor. Amet mauris commodo quis imperdiet. Varius sit amet mattis vulputate enim nulla aliquet porttitor lacus. Nullam ac tortor vitae purus faucibus ornare. Pharetra convallis posuere morbi leo urna molestie at elementum eu.</p>
</div>
</div>
</div>
Many thanks,
Lisa

Is this what you wanted or not? If you want to move header along with scroll, you can use position: sticky. Here you can find more: https://www.digitalocean.com/community/tutorials/css-position-sticky
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 20px;
}
.headerContainer {
width: 35%;
position: sticky;
position: -webkit-sticky;
top:10px;
left:0;
background-color: red;
border: 1px solid black;
color: white;
padding: 20px;
}
.row{
height: 2000px;
background-color: blue;
border: 1px solid black;
color: white;
padding: 20px;
}
h2{
margin:0 0 10px 0;
}
<body>
<body>
<h1> Test</h1>
<div class="row">
<div class="headerContainer">
<h2>Headline</h2>
<span>Additional Info</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu vitae elementum curabitur vitae nunc sed velit. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Eget mauris pharetra et ultrices neque ornare. Scelerisque eu ultrices vitae auctor eu. Aliquam vestibulum morbi blandit cursus risus at. Amet nisl purus in mollis nunc. Nunc faucibus a pellentesque sit amet porttitor eget. Aliquet bibendum enim facilisis gravida neque convallis a. Egestas congue quisque egestas diam. Leo in vitae turpis massa sed elementum tempus egestas. Ultricies lacus sed turpis tincidunt id aliquet risus. Lectus vestibulum mattis ullamcorper velit. Laoreet id donec ultrices tincidunt arcu. Ipsum consequat nisl vel pretium lectus quam id leo in. Mauris rhoncus aenean vel elit scelerisque mauris. Massa tincidunt dui ut ornare lectus sit amet est. Magna etiam tempor orci eu lobortis. Proin libero nunc consequat interdum varius sit. Urna duis convallis convallis tellus id interdum.
<br>
Amet nisl suscipit adipiscing bibendum est ultricies. Vitae et leo duis ut diam quam nulla. Ac tortor vitae purus faucibus ornare suspendisse sed nisi. Quam quisque id diam vel quam elementum pulvinar etiam non. Senectus et netus et malesuada fames ac turpis egestas sed. Lectus nulla at volutpat diam ut venenatis. Augue ut lectus arcu bibendum at varius vel pharetra vel. Sed vulputate mi sit amet mauris. Eu ultrices vitae auctor eu. Elementum sagittis vitae et leo duis ut diam. Imperdiet dui accumsan sit amet nulla facilisi morbi tempus iaculis. Erat pellentesque adipiscing commodo elit at imperdiet. Massa vitae tortor condimentum lacinia quis. Dui accumsan sit amet nulla facilisi morbi.
<br>
Orci eu lobortis elementum nibh tellus molestie nunc non. Gravida in fermentum et sollicitudin. Elementum curabitur vitae nunc sed velit dignissim sodales. Ipsum dolor sit amet consectetur. Tortor consequat id porta nibh. Cursus mattis molestie a iaculis at erat pellentesque adipiscing commodo. Convallis posuere morbi leo urna molestie. Massa placerat duis ultricies lacus sed turpis. Diam volutpat commodo sed egestas egestas. Nec ullamcorper sit amet risus nullam eget felis eget. Cursus vitae congue mauris rhoncus aenean. Quis lectus nulla at volutpat diam ut. Convallis aenean et tortor at risus.
<br>
Convallis convallis tellus id interdum velit laoreet id donec. Laoreet non curabitur gravida arcu ac tortor dignissim convallis aenean. Sed odio morbi quis commodo. Feugiat in fermentum posuere urna nec. Elementum facilisis leo vel fringilla est ullamcorper. Pellentesque diam volutpat commodo sed egestas egestas. Ac tortor dignissim convallis aenean et tortor. Nunc eget lorem dolor sed viverra ipsum. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. Morbi leo urna molestie at elementum. Nisl purus in mollis nunc sed. Volutpat blandit aliquam etiam erat. Vel turpis nunc eget lorem dolor sed. Neque ornare aenean euismod elementum nisi quis eleifend. Habitant morbi tristique senectus et netus et. Non pulvinar neque laoreet suspendisse interdum consectetur. Congue eu consequat ac felis donec et odio pellentesque. Volutpat odio facilisis mauris sit amet.
<br>
Pellentesque habitant morbi tristique senectus et netus et malesuada. In ornare quam viverra orci sagittis. Mauris cursus mattis molestie a iaculis at. Morbi blandit cursus risus at ultrices mi tempus imperdiet. Interdum velit laoreet id donec. Tortor pretium viverra suspendisse potenti nullam ac tortor. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Ut sem viverra aliquet eget sit amet tellus. Ut aliquam purus sit amet luctus venenatis lectus magna fringilla. Turpis nunc eget lorem dolor. Lobortis feugiat vivamus at augue eget arcu dictum varius duis. Sit amet dictum sit amet justo donec enim diam. Neque viverra justo nec ultrices dui. Felis imperdiet proin fermentum leo vel. Egestas quis ipsum suspendisse ultrices gravida dictum fusce ut placerat.
<br>
Vestibulum morbi blandit cursus risus at ultrices mi tempus imperdiet. Lacus suspendisse faucibus interdum posuere. Vulputate dignissim suspendisse in est ante in nibh mauris cursus. Gravida rutrum quisque non tellus orci ac auctor augue mauris. Amet aliquam id diam maecenas ultricies mi eget. Libero volutpat sed cras ornare arcu dui vivamus. Vel pharetra vel turpis nunc eget lorem dolor sed viverra. Et netus et malesuada fames. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Ipsum dolor sit amet consectetur. Consectetur purus ut faucibus pulvinar elementum integer. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Semper eget duis at tellus. Congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Eget arcu dictum varius duis at consectetur lorem donec. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Nullam eget felis eget nunc lobortis mattis.
<br>
Venenatis lectus magna fringilla urna. Lorem mollis aliquam ut porttitor. Id diam maecenas ultricies mi eget mauris. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus est. Tincidunt lobortis feugiat vivamus at augue eget arcu dictum varius. Tincidunt eget nullam non nisi est sit amet facilisis. Felis donec et odio pellentesque diam. Nullam ac tortor vitae purus. Dictum at tempor commodo ullamcorper a lacus. Diam maecenas sed enim ut sem viverra aliquet eget. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Ac felis donec et odio pellentesque diam volutpat commodo. Facilisis volutpat est velit egestas dui.
<br>
Vel orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Quam quisque id diam vel quam elementum pulvinar etiam non. Amet massa vitae tortor condimentum lacinia quis vel eros. Maecenas pharetra convallis posuere morbi leo urna molestie. Mattis rhoncus urna neque viverra justo nec ultrices dui sapien. Ante metus dictum at tempor commodo ullamcorper a lacus. Dui faucibus in ornare quam viverra orci sagittis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Tincidunt nunc pulvinar sapien et. Sed adipiscing diam donec adipiscing tristique risus nec. Dolor morbi non arcu risus quis varius quam quisque id. Morbi quis commodo odio aenean.
<br>
Dolor sit amet consectetur adipiscing. Aliquet nec ullamcorper sit amet risus nullam eget felis. Tristique magna sit amet purus. Ut venenatis tellus in metus vulputate. Sollicitudin tempor id eu nisl nunc mi. Auctor augue mauris augue neque gravida in. Et malesuada fames ac turpis egestas integer eget aliquet nibh. Nisl suscipit adipiscing bibendum est ultricies integer quis auctor elit. Aliquam purus sit amet luctus venenatis lectus. Eget mauris pharetra et ultrices neque ornare. Congue eu consequat ac felis. Lacus viverra vitae congue eu consequat ac felis donec et.
<br>
Tempus iaculis urna id volutpat lacus laoreet. Quis commodo odio aenean sed adipiscing diam. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Blandit massa enim nec dui nunc mattis enim. Sem integer vitae justo eget magna fermentum iaculis eu non. Ut tortor pretium viverra suspendisse potenti. Pharetra sit amet aliquam id diam maecenas ultricies mi eget. Ut tristique et egestas quis. Ut enim blandit volutpat maecenas volutpat. Magna eget est lorem ipsum. Ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget. Cum sociis natoque penatibus et magnis dis. Nisi quis eleifend quam adipiscing vitae. Odio euismod lacinia at quis risus. Dignissim sodales ut eu sem integer. Arcu ac tortor dignissim convallis aenean et tortor. Amet mauris commodo quis imperdiet. Varius sit amet mattis vulputate enim nulla aliquet porttitor lacus. Nullam ac tortor vitae purus faucibus ornare. Pharetra convallis posuere morbi leo urna molestie at elementum eu.</p>
</div>
</body>

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 disable the body scroll in the navigation overlay and enable it in the body?

Hello guys i'm looking for an answer to disable the body content scroll in navigation overlay, but when I close the navigation overlay the body scroll should start working but i'm unable to do that.
I couldn't find any correct answer on Stackoverflow. Any help would be appreciated.

You can use JavaScript to set the body overflow (or whatever element's) to hidden when the overlay opens & set it back to auto when you click the close button.
$('.open-overlay').click(function() {
$('body').css('overflow', 'hidden');
});
$('.close-overlay').click(function() {
$('body').css('overflow', 'auto');
});
Here's a working fiddle: https://jsfiddle.net/44gk77d3/1
EDIT: I've added the option to both enable/disable the overflow by clicking on the same button.
https://jsfiddle.net/44gk77d3/2/

Seeing your requirement I have created a code considering your conditions.
I have created body content with scrollable content and overlay menu also with scrollable content.
In the below-mentioned code you can check how body scroll is disabled while overlay menu is visible and again body scroll appears when overlay menu hides.
function openNav() {
document.getElementById("myNav").style.width = "100%";
document.querySelector("body").style.overflow = "hidden";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
document.querySelector("body").style.overflow = "auto";
}
body {
font-family: 'Lato', sans-serif;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
<div id="myNav" class="overlay">
×
<div class="overlay-content">
About
Services
Clients
Contact
About
Services
Clients
Contact
About
Services
Clients
Contact
About
Services
Clients
Contact
About
Services
Clients
Contact
About
Services
Clients
Contact
About
Services
Clients
Contact
About
Services
Clients
Contact
About
Services
Clients
Contact
</div>
</div>
<h2>Fullscreen Overlay Nav Example</h2>
<p>Click on the element below to open the fullscreen overlay navigation menu.</p>
<p>In this example, the navigation menu will slide in, from left to right:</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat est eget consequat varius. Vestibulum non sapien ligula. Ut in nunc vel tortor finibus euismod vitae at ex. Cras ac purus iaculis, dapibus mi quis, volutpat lorem. Nunc rutrum tellus
massa, vitae molestie enim fermentum eu. Fusce id ex eu mi luctus rhoncus ut eget nulla. Cras a vehicula arcu, id pharetra mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean malesuada dui ac iaculis vehicula. Etiam venenatis,
est a tincidunt commodo, ex sapien cursus diam, non dictum purus lorem eu tellus. Ut ornare enim orci, ut vulputate odio feugiat at. Nullam laoreet sed ex non ultricies. Maecenas suscipit tincidunt elit, non pellentesque enim ornare et. Phasellus eu
gravida libero, vel tincidunt orci. Nulla facilisi. In congue, sapien tincidunt eleifend ornare, ex lectus finibus felis, aliquet pretium dui justo sed sapien. Nulla elementum arcu non leo lobortis, in ullamcorper eros convallis. Nullam luctus tincidunt
semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque ac risus sagittis, venenatis dolor eget, tempus nunc. Proin et nisl ac metus blandit interdum convallis ac quam. Proin porttitor nulla vel egestas
euismod. Suspendisse malesuada tellus quis purus consectetur molestie. Cras interdum varius interdum. Vestibulum condimentum nisi turpis, ut sodales arcu fringilla ut. Quisque ultricies sollicitudin lacus, sit amet euismod sem sagittis ac. Praesent
consectetur libero ut nunc suscipit vulputate. Duis commodo neque vel convallis euismod. Suspendisse potenti. Sed viverra eu enim a rhoncus. Proin sodales commodo odio non blandit. Phasellus rhoncus tellus at velit maximus tincidunt. Nullam lacus lectus,
mattis vel justo vitae, lacinia tempus elit. Sed dignissim posuere accumsan. In malesuada luctus tristique. Ut fringilla aliquet sapien in aliquet. Proin ac ultrices lectus. Mauris sed libero rutrum, tincidunt urna et, dignissim massa. Cras iaculis
sed tortor id maximus. Aliquam in sem id mi tristique pellentesque vitae efficitur leo. Proin non dolor ac libero fringilla tempor sed a arcu. Aenean rutrum tellus sapien, in volutpat lectus cursus et. Sed vel bibendum nulla. Proin nunc quam, dictum
eget congue maximus, vestibulum eu mauris. Aliquam erat volutpat. Morbi quis magna et est tempor condimentum in eu purus. Sed dignissim nulla sed diam scelerisque, non malesuada purus sodales. Praesent in nunc condimentum, tempor dolor vitae, accumsan
enim. Sed nec elit in ex porttitor rutrum. Maecenas ultricies augue eu ex porta, finibus efficitur ex eleifend. Proin volutpat diam a diam ultrices euismod. Sed bibendum semper lorem sodales auctor. Sed turpis dolor, pellentesque nec dui quis, tincidunt
commodo urna. Fusce sit amet elementum enim. Curabitur vel sodales mi, sed laoreet leo. Fusce ut ultricies justo. Etiam nec massa tortor. Mauris interdum commodo erat, in pulvinar urna vestibulum in. In posuere dictum nisl, non bibendum velit mattis
vulputate. Vivamus elementum magna et egestas bibendum. Nulla efficitur urna pellentesque, feugiat augue fringilla, pulvinar felis. In at sollicitudin metus. Aliquam vehicula aliquet dolor vel bibendum. Donec euismod enim metus, et gravida sem tempus
et. Donec ipsum quam, fermentum vel finibus quis, tempor vitae sem. Suspendisse tincidunt nulla ut eros congue cursus. Praesent ante ligula, congue in laoreet sed, pellentesque vel sapien. Nam pulvinar dolor at odio dignissim, vestibulum finibus justo
aliquet. Duis lobortis, metus a vehicula interdum, quam metus convallis orci, et rutrum nibh purus at massa. Aenean rutrum mi enim, accumsan efficitur lorem accumsan quis. In laoreet id arcu non accumsan. Donec quis urna et risus auctor feugiat eget
quis nisl. Aliquam vulputate libero a lacus luctus dignissim. Duis accumsan a tellus sed ultrices. Etiam ornare purus id iaculis volutpat. Pellentesque euismod mi orci, malesuada hendrerit ligula varius sollicitudin. Integer tortor justo, rhoncus a
lobortis vel, pharetra eu ipsum. Aliquam et lectus turpis. Aenean sagittis sapien ut mattis efficitur. Ut ut ullamcorper nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque tempus leo metus. Donec tempus dictum mauris. Praesent
finibus dolor vel faucibus finibus. Vestibulum tincidunt euismod dui in pretium. Donec quis facilisis augue. Praesent at lacus vestibulum, finibus leo a, lacinia est. Praesent vehicula sem turpis, non maximus elit placerat quis. Sed quis mi eu nunc
feugiat fermentum ut in mauris. Fusce turpis augue, mollis eu risus a, tincidunt pretium felis. Aliquam sapien velit, bibendum in bibendum at, porta et purus. Nam feugiat lectus vitae ex blandit vestibulum. Curabitur et vestibulum quam, quis ornare
odio. Pellentesque cursus, felis sit amet convallis rutrum, eros dolor finibus justo, sed finibus metus augue quis tellus. Morbi rutrum, mi ut pretium egestas, nisi risus luctus tellus, at pulvinar magna orci ut nunc. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Maecenas nec eros malesuada, ornare arcu vitae, dictum massa. Suspendisse suscipit, ante vitae elementum scelerisque, orci neque mattis massa, vel luctus ante orci ac urna. Vestibulum sagittis, urna eget pellentesque convallis, massa
lorem tincidunt purus, eget tincidunt enim libero at lacus. Maecenas dignissim quam ut leo consectetur facilisis. Phasellus tincidunt viverra malesuada. Phasellus nec quam maximus, egestas ante ut, facilisis erat. Phasellus porta magna enim, nec semper
dolor facilisis sit amet. Proin dapibus dui sit amet urna convallis, et bibendum nunc aliquet. Suspendisse ac ex eu dui mollis molestie. Sed dignissim, sem in pretium ultrices, enim elit pellentesque odio, quis elementum nunc magna vitae nibh. Nulla
venenatis quis risus vitae rhoncus. Vivamus varius tempus justo vitae volutpat. Suspendisse vitae venenatis erat. In et ultrices nunc. Curabitur ac suscipit orci. Proin porta nibh ac urna viverra, a porttitor risus porttitor. Aliquam bibendum convallis
enim, eget porttitor dui dignissim vitae. Duis aliquet congue enim sit amet pretium. Ut sed imperdiet diam. Nam ut est mauris. Vestibulum ut lorem tristique, accumsan neque et, egestas diam. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Sed justo leo, accumsan suscipit purus nec, auctor faucibus leo. Donec at tincidunt purus, sit amet vulputate risus. Duis sed sodales neque. Donec nec risus id metus venenatis aliquam. Sed maximus tortor et ligula commodo
finibus. Nullam in leo at urna aliquam pellentesque. Donec egestas ex sapien, vitae commodo magna accumsan vitae. Sed tincidunt sit amet lacus accumsan rhoncus. Mauris feugiat magna vel nisl tincidunt, nec auctor neque pulvinar. Cras sit amet pellentesque
justo, sit amet elementum sapien. Suspendisse imperdiet feugiat massa, eu vulputate neque commodo quis. Morbi venenatis est ut massa sollicitudin consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin
porttitor diam sed convallis faucibus. Fusce pretium eget mi id consequat. Proin non sem euismod, porttitor elit sed, porttitor eros. Nam elementum, turpis quis convallis lacinia, libero nisi consectetur lectus, in luctus neque enim in leo. Quisque
congue elementum interdum. Quisque commodo urna ipsum, in ullamcorper sapien elementum vitae. Vivamus mollis magna orci, id volutpat felis sodales vitae. Quisque sagittis, ante a luctus dignissim, nisi elit mattis sapien, et sodales neque risus ut lacus.
Duis viverra justo augue, vel ornare erat laoreet ac. Aenean imperdiet leo non tristique dapibus. Morbi in tempus metus. Sed eu scelerisque dolor, ac vehicula tellus. Vivamus a quam a nisi dignissim posuere. Nulla facilisi. Praesent tristique dui nec
neque aliquam blandit. Nam non tincidunt ipsum. Morbi cursus sed nulla quis porta. Ut urna libero, iaculis ut velit sed, sagittis consectetur nisi. Aliquam pretium, est ac auctor pellentesque, nulla odio ornare dolor, sed vulputate purus neque ut ligula.
Cras diam felis, tempor quis placerat a, suscipit non odio. Nam enim erat, tempor nec euismod at, venenatis ut mi. Sed lacus sem, semper vel blandit id, rutrum et augue. Nulla varius mattis felis. Vestibulum ac eros sollicitudin, vehicula massa non,
suscipit dolor. Phasellus posuere ultricies nunc, lacinia viverra augue tempus eget. Quisque id lacinia nisi, sit amet tempor augue. Integer massa velit, aliquam vitae ex et, placerat euismod augue. Nullam faucibus, lorem eget sodales hendrerit, nulla
enim molestie risus, sed laoreet velit erat nec elit. Pellentesque nec condimentum felis. Quisque at nisi nec purus blandit hendrerit in et risus. Nam mattis enim tortor, eu porttitor purus blandit sed. Aenean scelerisque sodales consectetur. Sed euismod
ullamcorper mauris at aliquet. Praesent varius quam vulputate gravida tincidunt. Cras vitae nisl bibendum, dictum lectus sed, semper enim. Donec id felis ex. Proin sit amet eros nec metus eleifend dapibus at a nibh. Suspendisse est nibh, bibendum quis
tincidunt non, lobortis eget lorem. Aenean cursus pharetra porta. In congue, erat sit amet tempus molestie, arcu nisl finibus risus, eu tempus augue purus et ex. Vivamus maximus nisl ut facilisis suscipit. Vivamus nec ullamcorper arcu. Etiam eu dolor
vel orci consequat imperdiet nec eget nulla. Praesent volutpat maximus dolor, ut ornare odio aliquet interdum. Duis at felis velit. In non facilisis leo. Nulla a convallis nulla. Donec nulla odio, vestibulum eget pulvinar in, congue et lorem. Mauris
mollis cursus erat, in dignissim tortor viverra non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vel nisi fringilla, molestie mi id, placerat lorem. Nullam elementum diam mauris, vel hendrerit lacus faucibus
ac. Donec justo orci, pretium at mollis et, rhoncus sed est. In tincidunt pellentesque nisl eu malesuada. Donec sagittis eros sit amet aliquam fringilla. Duis ullamcorper, ipsum vitae dignissim elementum, est odio accumsan orci, non pharetra ipsum dolor
sit amet nisi. In vulputate scelerisque arcu, sed laoreet nunc laoreet gravida. Fusce arcu sapien, dapibus nec dui vel, imperdiet luctus elit. Nullam ultrices velit a ex euismod, id fermentum risus mollis. Curabitur sem magna, posuere a nisl non, fringilla
pellentesque quam. Suspendisse ornare aliquet sem, ut luctus diam vulputate id. Nunc ac rhoncus erat. Nullam sed tortor mi. Etiam sed lorem ligula. Pellentesque efficitur fermentum lacinia. Aliquam erat volutpat. In fringilla elit ornare lacus euismod,
vel facilisis lorem tempus. Nulla et arcu vitae eros lacinia laoreet. Etiam convallis hendrerit libero, et tempus erat placerat ac. Nulla vitae tellus vitae risus euismod bibendum quis vel magna. Donec pellentesque mollis risus. Proin eleifend ipsum
mi, id malesuada lacus tincidunt sed. Maecenas aliquam facilisis urna, eget fringilla dui vulputate ac. Nam et lectus magna. Nulla sed mauris ut velit tempus sollicitudin eget id lacus. Vivamus venenatis massa orci, ut dapibus quam porttitor et. Maecenas
neque mi, commodo quis diam et, pellentesque porttitor nisl. Fusce dictum lectus mauris, a iaculis turpis tincidunt eu. Sed vestibulum quis ex dignissim ullamcorper. Integer tempus elit et dolor semper, eget interdum magna fermentum. Ut pulvinar venenatis
ultricies. Donec rutrum turpis at ipsum congue bibendum. Nam porttitor id dolor in pharetra. Ut lectus mi, suscipit ut odio et, condimentum luctus sapien. Vivamus est enim, volutpat at viverra ut, sollicitudin at ex. Nulla imperdiet porta sem. Nulla
facilisi. Maecenas et risus sit amet magna fringilla placerat. Nulla elementum nunc vitae dictum varius. Ut eu felis risus. Aliquam viverra vestibulum velit, ut cursus nisl cursus in. Sed molestie massa at nisi ornare sodales.
</p>
If still you face any doubt feel free to comment.