We Keep Coding

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>

Resizing div containing text on change of window size

I have implemented a function for changing the size of a div containing text, debounced for x amount of time.
And this is working when reducing the screen size, however, it does not work when expanding the screen back again.
This may be due to property scrollHeight, however I am unsure of a better way of implementing this.
I do not wish to use JQuery, please help.
https://codepen.io/physicsboy/pen/BayoLZX
const box = document.getElementById('box');
const scrl = box.scrollHeight;
box.style.height = `${scrl}px`;
console.log({box});
window.addEventListener('resize', _.debounce(() => {
console.log('debounced');
reset()
}, 500));
function reset() {
console.log('resizing');
const scrlHeight = box.scrollHeight;
console.log(`height: ${box.style.height} - scrollheight: ${scrlHeight}`);
box.style.height = `${scrlHeight}px`;
}
#box {
margin: auto auto;
padding: 20px;
max-width: 500px;
height: 200px;
background: lightgrey;
overflow: hidden;
}
<div id="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non dolor nec risus cursus convallis. Sed tempor libero eu est elementum, id molestie purus cursus. Nunc pulvinar metus non ante tincidunt tempus. Proin metus mi, varius sed purus et, feugiat auctor lectus. Pellentesque elementum dui quis nunc consectetur, vitae iaculis risus laoreet. Fusce velit leo, tristique vitae faucibus eget, sagittis sed libero. Duis eleifend interdum vulputate. Vivamus vehicula commodo leo, quis rhoncus mi pharetra nec. Vivamus elementum sodales arcu nec consectetur. Nullam rhoncus risus metus, id rhoncus lacus vulputate vel. Nam sit amet egestas arcu, et ornare elit. Pellentesque fringilla volutpat urna, vel ullamcorper velit volutpat at. Pellentesque convallis tristique consequat. Etiam at diam vitae urna bibendum maximus. Nulla elementum, ex vitae tempor egestas, sem sapien pulvinar orci, et scelerisque dolor ante at nisi.
Donec in urna sed est tincidunt gravida. Proin ullamcorper sed nunc et scelerisque. Mauris sit amet arcu a odio tincidunt hendrerit. In consectetur justo ipsum, vel posuere erat tincidunt vel. Nullam dignissim ornare nunc, a porttitor felis placerat in. Etiam feugiat sem sit amet tristique congue. Donec ut arcu sit amet mauris volutpat pellentesque a a felis. Quisque purus tellus, placerat in congue nec, lacinia in lectus. Nam eget ante faucibus, facilisis odio id, dignissim lorem. Vivamus porta pharetra velit a cursus. Phasellus ac volutpat ex, nec cursus sem. Pellentesque congue sem consectetur, consectetur justo at, gravida ex. Quisque est nunc, tempus sed massa sed, consequat fringilla nulla.
Phasellus consectetur, velit id suscipit volutpat, mauris mi tempus augue, sit amet dapibus dolor ipsum eget dui. Vestibulum finibus lectus facilisis feugiat accumsan. Duis lectus felis, blandit et massa ut, eleifend sagittis lacus. Pellentesque imperdiet pharetra nisi eget venenatis. Nullam tincidunt leo nec sem lacinia auctor.
</div>

Remove jQuery and height from CSS, Use below code for CSS
#box {
margin: auto auto;
padding: 20px;
max-width: 500px;
background: lightgrey;
}
Hope it will work for you.

You might not need jQuery, just use viewport width unit "VW" .
Try this :
#box {
margin: auto auto;
padding: 20px;
max-width: 500px;
background: lightgrey;
overflow: hidden;
width: 80vw;
height:auto
}

Is it possible to hide overflow but still allow scrolling?

Probably a very stupid question, but I added overflow:hidden to my body to remove white space that appears beneath it but this disables scrolling, I realize the issue is probably elsewhere and this isn't the fix, but am wondering if it's possible to hide overflow but enable scrolling?

Try
#elem { overflow:auto }
this will enable scrolling when the conatining content is bigger that the parent

If you want to do it with webkit you can do it like this:
#container {
overflow: scroll;
overflow-x: hidden;
height:65px;
width:350px
}
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
<div id="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer vehicula quam nibh, eu tristique tellus dignissim
quis. Integer condimentum ultrices elit ut mattis.
Praesent rhoncus tortor metus, nec pellentesque enim
mattis nec. Nulla vitae turpis ut dui consectetur
pellentesque quis vel est. Curabitur rutrum, mauris ut
mollis lobortis, sem est congue lectus, ut sodales nunc
leo a libero. Cras quis sapien in mi fringilla tempus
condimentum quis velit. Aliquam id aliquam arcu. Morbi
tristique aliquam rutrum. Duis tincidunt, orci suscipit
cursus molestie, purus nisi pharetra dui, tempor
dignissim felis turpis in mi. Vivamus ullamcorper arcu
sit amet mauris egestas egestas. Vestibulum turpis neque,
condimentum a tincidunt quis, molestie vel justo. Sed
molestie nunc dapibus arcu feugiat, ut sollicitudin metus
sagittis. Aliquam a volutpat sem. Quisque id magna
ultrices, lobortis dui eget, pretium libero. Curabitur
aliquam in ante eu ultricies.
</div>

element{ overflow: scroll; }
This will remove white space and if content is overflow generate scroll automatically.

Try This:
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer vehicula quam nibh, eu tristique tellus dignissim quis.
Integer condimentum ultrices elit ut mattis.
Praesent rhoncus tortor metus, nec pellentesque enim
mattis nec. Nulla vitae turpis ut dui consectetur
pellentesque quis vel est. Curabitur rutrum, mauris ut
mollis lobortis, sem est congue lectus, ut sodales nuncleo a
libero. Cras quis sapien in mi fringilla tempus
condimentum quis velit. Aliquam id aliquam arcu. Morbi
tristique aliquam rutrum. Duis tincidunt, orci suscipit
cursus molestie, purus nisi pharetra dui, tempor
dignissim felis turpis in mi. Vivamus ullamcorper arcu
sit amet mauris egestas egestas.
</div>
</div>
CSS
.parent{
position: relative;
width: 300px;
height: 150px;
border: 1px solid black;
overflow: hidden;
}
.child{
height: 150px;
width: 312px;
padding-right:15px;/* change as per your browser scroll*/
overflow-y: scroll;
}

set overflow-x:scroll and hide the horizontal scrollbar

I want to be able to scroll horizontally, but without the scroll bar shown.
I know, in Chrome it's:
::-webkit-scrollbar {
display: none;
}
But what about the Firefox and Internet Explorer? Somebody gives the following solution, but it seems does not work for horizontal scroll bar, it just works for vertical scroll bar.
#parent{
height: 100%;
width: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px;
}
Is there someone could help me?

For fire fox just use this rule:
overflow: -moz-scrollbars-none;
for IE:
-ms-overflow-style: none;
jsFiddle Demo (Test it on FF & IE)

Based on this tutorial:
Here the code:
.element, .outer-container {
width: 200px;
height: 200px;
}
.outer-container {
border: 5px solid purple;
position: relative;
overflow: hidden;
}
.inner-container {
position: absolute;
left: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.inner-container::-webkit-scrollbar {
display: none;
}
<div class="outer-container">
<div class="inner-container">
<div class="element">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer vehicula quam nibh, eu tristique tellus dignissim
quis. Integer condimentum ultrices elit ut mattis.
Praesent rhoncus tortor metus, nec pellentesque enim
mattis nec. Nulla vitae turpis ut dui consectetur
pellentesque quis vel est. Curabitur rutrum, mauris ut
mollis lobortis, sem est congue lectus, ut sodales nunc
leo a libero. Cras quis sapien in mi fringilla tempus
condimentum quis velit. Aliquam id aliquam arcu. Morbi
tristique aliquam rutrum. Duis tincidunt, orci suscipit
cursus molestie, purus nisi pharetra dui, tempor
dignissim felis turpis in mi. Vivamus ullamcorper arcu
sit amet mauris egestas egestas. Vestibulum turpis neque,
condimentum a tincidunt quis, molestie vel justo. Sed
molestie nunc dapibus arcu feugiat, ut sollicitudin metus
sagittis. Aliquam a volutpat sem. Quisque id magna
ultrices, lobortis dui eget, pretium libero. Curabitur
aliquam in ante eu ultricies.
Quisque vitae tincidunt purus. Vivamus feugiat bibendum
erat, nec interdum urna porta sed. Nunc lobortis neque
orci, ut suscipit nisl congue feugiat. Vivamus feugiat
tellus quis cursus sollicitudin. Curabitur dolor massa,
dictum ut ipsum in, porttitor pellentesque ante. Aenean
egestas cursus tempor. Maecenas semper tortor sit amet
egestas cursus. Mauris porttitor quis nisi ut tincidunt.
Curabitur adipiscing eleifend nibh. Praesent mauris leo,
consequat vitae orci eget, vestibulum bibendum nisi.
Aliquam tempus diam ut tortor cursus, eget sodales augue
adipiscing. Nulla at dignissim libero.
</div>
</div>
</div>

Overflow DIV to fit exactly inside browser

I am trying to set vertical scroll bar to the div2 to replace the default browser vertical scroll bar.
.div1 {
height: 200px;
}
.div2 {
overflow-y: auto;
height: 500px;
}
<div id='container' style="height:100%">
<div class='div1'>
div1 content
</div>
<div class='div2'>
div2 content
</div>
</div>
With the above style, document is left with blank space at the bottom since height of div2 is not exactly occupying the entire document height. How do I fix that?

The steps to achieve what you want are:
Set both html's and body's margin and padding to 0.
Set the header's height to the fixed height you want: in your case, 200px.
Set the .main's height to 100% of the viewport less the header height: calc(100vh - 200px).
Set the .main's overflow-y to auto.
Create a section into the .main, and set the margin you want to show your content (optional).
And then, we're done! Take a look at the example below (if you want to test it in a better way, click on the Full Page button, and then play with your window's resizing etc):
html,
body {
overflow: hidden;
padding: 0;
margin: 0;
}
header {
height: 120px;
background-color: blue;
}
div.main {
height: calc(100vh - 120px);
background-color: red;
overflow-y: auto;
}
div.main > section {
margin: 10px;
}
div.main > div > p {
text-align: justify;
}
<header>
</header>
<div class="main">
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt enim sit amet diam bibendum, ut rhoncus est molestie. Ut vulputate egestas mauris, eget ultricies tellus aliquet nec. Mauris nec neque et lorem volutpat feugiat eget sit amet
erat. Nullam luctus ultricies augue ut cursus. Mauris pulvinar velit at venenatis semper. Quisque non dolor ante. Nulla tempus id turpis et placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum justo elit, rhoncus vitae
massa non, condimentum ornare quam. Duis sit amet orci a risus mollis gravida et quis augue. Donec sed felis ante. Vestibulum rutrum non dolor quis finibus. Vestibulum ultricies leo eget mi elementum, vel vestibulum felis maximus. Donec congue lorem
vel ante mattis, eu luctus magna finibus. Donec sit amet dui quam.
</p>
<p>
In ullamcorper, nibh eget venenatis imperdiet, augue ante porttitor mauris, nec scelerisque tortor nisi eu arcu. Phasellus libero ligula, eleifend a lobortis in, cursus in tellus. Morbi volutpat, sem a dignissim venenatis, velit nulla vehicula sem, ut
fermentum augue eros sit amet nisi. Vivamus eget ex id turpis scelerisque lobortis sed sed arcu. Nulla facilisi. Curabitur hendrerit iaculis justo, at iaculis est facilisis sit amet. Donec sem tellus, posuere et metus id, consectetur vehicula sapien.
Ut eros quam, tempor vitae quam sed, efficitur faucibus sapien. Mauris varius velit orci, sit amet fermentum neque auctor ac. Nullam pretium sed urna et pellentesque.
</p>
<p>
Nunc id odio ligula. Sed ut dolor vitae sem fringilla condimentum. Sed venenatis lacus a magna egestas, nec volutpat quam ullamcorper. Maecenas volutpat eu magna nec ultrices. In egestas, risus id porta condimentum, odio urna ultricies mi, ut elementum
magna tortor quis eros. Sed a hendrerit felis. Curabitur id sem consectetur, luctus velit in, sollicitudin elit. Proin ac commodo tortor. Proin imperdiet id massa at sollicitudin. Pellentesque enim arcu, venenatis ut dictum et, ornare at tortor.
Donec et urna nec metus rhoncus auctor. Nunc id nisi nec sem condimentum vehicula a in arcu.
</p>
<p>
Proin eleifend sem massa, at auctor eros porta congue. Aliquam nec aliquet justo, at cursus ipsum. Cras justo leo, varius vel accumsan eget, sagittis sit amet lorem. Donec pulvinar ante ut efficitur eleifend. Duis tincidunt metus non nunc accumsan, vel
accumsan velit rhoncus. Nunc arcu magna, sollicitudin non urna in, pellentesque dignissim eros. Nam placerat sodales rutrum. Sed quis placerat leo. Nunc porttitor nisi nunc, in feugiat dolor accumsan nec. Aliquam gravida diam ac tempor sodales.
Ut in sapien gravida odio molestie vehicula sed vel nulla. Integer sed ipsum semper, auctor massa eget, viverra justo. Nullam mattis suscipit lorem vel mattis. Morbi non aliquet nunc. In hac habitasse platea dictumst.
</p>
<p>
Pellentesque dapibus sapien quis congue porta. Maecenas faucibus ex nisi, in varius risus imperdiet ac. Aliquam tristique egestas ligula, sed vestibulum lacus mollis vel. Nunc non ante ut quam placerat suscipit. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. In a viverra augue, a dignissim justo. Aliquam volutpat nibh ut tellus interdum suscipit. Praesent mi sem, mollis in libero vel, pretium accumsan ex. Nullam gravida diam quis semper faucibus. Nullam cursus felis dolor, sed egestas
ex lobortis et. Vivamus at maximus felis, vel posuere purus. Quisque pellentesque risus nec posuere suscipit. Aliquam eleifend tempus ante, vel vehicula nunc facilisis quis. Mauris lacinia, felis at ultrices luctus, lacus nisl molestie neque, et
varius urna velit at massa. Nulla facilisi.
</p>
</section>
</div>

I'm not absolutely sure what you're trying to do but try adding this to your css and see if it fixes it.
html, body { height: 100%; }

Try this. The border on div1 and div2 is just to show the height of the div. Feel free to remove it ;)
#container {
height: 100%;
position: absolute;
}
.div1 {
height: 200px;
position: relative;
border: 2px solid yellow;
}
.div2 {
overflow-y: auto;
position: relative;
height: 100%;
border: 2px solid red;
}
<div id='container' style="height:100%">
<div class='div1'>
div1 content
</div>
<div class='div2'>
div2 content
</div>
</div>