How to have an image as a slider handle(CSS) - javascript

I'd like to have on my HTML page a slider with an image as a handle.
On the internet, I found something for this purpose that simply says to change the CSS background property: background: url('image.png');... but this didn't work for me.
this is my slider setting:
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: blue;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: blue;
cursor: pointer;
}
So, do you know how to have an image as a handle? Thanks in advance,
Greg


body {
overflow-y: scroll;
}
body::-webkit-scrollbar {
background: black;
}
body::-webkit-scrollbar-thumb {
background: url('https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg') no-repeat;
background-size: 50px 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in accumsan lectus, id lacinia ante. In consectetur, arcu in tempus tempor, ipsum nulla porta ipsum, id pulvinar felis ante at dolor. Nam hendrerit egestas tellus quis dignissim. Praesent dictum felis eu pulvinar dictum. Quisque non venenatis magna. Donec molestie quis massa sit amet lobortis. Nulla a dictum augue. Sed vestibulum venenatis libero, quis tincidunt turpis ultricies vitae. Ut eget suscipit magna. Praesent rutrum egestas odio, sit amet elementum eros vestibulum nec. Vestibulum id viverra odio.
Mauris lobortis tincidunt ipsum, non pulvinar massa molestie ut. Mauris pulvinar nibh in elit eleifend, eu tempor erat fringilla. Suspendisse aliquam congue metus vitae aliquam. Etiam finibus erat eget tellus volutpat bibendum. Pellentesque iaculis leo et tellus rhoncus commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris volutpat metus eu eros convallis hendrerit. Cras vitae rutrum quam. Vestibulum vitae consequat ex, non luctus nisi. Nam sollicitudin est vitae sapien finibus bibendum.
Phasellus consequat laoreet odio a placerat. Ut sagittis eget lorem non interdum. Fusce ligula purus, rhoncus quis sagittis vitae, bibendum in diam. Aenean fringilla rutrum nisl. In at dictum mi. Praesent tortor arcu, imperdiet nec finibus non, dignissim sit amet sapien. Praesent placerat, metus nec ultrices luctus, dui erat mattis velit, vel mollis nibh lorem non lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur luctus nisl leo, ut efficitur purus tincidunt ultricies. Nullam pretium velit non ante tempus, vel fringilla augue porttitor. Morbi iaculis risus at tincidunt vehicula. Phasellus nec quam a magna faucibus porta. Etiam mollis ultrices sem vitae imperdiet. Morbi posuere nulla efficitur, suscipit ante ut, ullamcorper lectus.
Proin sit amet nisi at lacus viverra tristique. Quisque nec lacus quis lorem mollis mollis fringilla et ante. Morbi aliquam suscipit finibus. Nullam in odio congue, consequat eros eget, pellentesque mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse cursus nulla vel cursus consequat. Nunc porta rhoncus pellentesque. In blandit dui a vehicula molestie. Aliquam efficitur, risus id laoreet vehicula, purus orci aliquet massa, ut eleifend neque arcu vitae nibh. Duis posuere at metus at pulvinar. Phasellus venenatis eu leo nec scelerisque. Phasellus maximus non sem quis viverra. Aliquam scelerisque nunc ac massa ullamcorper, at euismod nisi iaculis. Maecenas interdum sed enim eget ultrices. Curabitur eget rutrum mi.
Aenean facilisis imperdiet elit, sit amet iaculis sem ornare eu. Fusce quis congue lorem, non cursus odio. Duis sodales elementum tellus sed volutpat. Mauris tincidunt massa et condimentum ultrices. Nulla blandit rhoncus elementum. Phasellus tincidunt turpis quam, imperdiet tincidunt eros gravida sit amet. Morbi in condimentum metus, in condimentum nulla. Aenean ac turpis mollis, rhoncus augue a, aliquet enim. Curabitur commodo tincidunt tellus id maximus. Cras dolor neque, gravida et dolor id, scelerisque laoreet diam. Donec rhoncus egestas est a pretium. Vivamus cursus congue felis, at auctor diam pharetra in. Suspendisse nec laoreet nunc. Morbi ut elementum ante.
</h3>
</body>
</html>
First thing I noticed that you got wrong in your code is that you first have to assign ::-webkit-scrollbar so you would be able to design all inner element of an scrollbar after.
NOTE: This will only work on Chrome/Safari because it's -webkit-.

Related

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>

How to make submenu always under the header?

I need to make a submenu always adjacent to main menu(header). Header is always the same for all subpage but submenu is different for each subpage. I want to when window scroll down, header padding change and submenu is still adjacent to header - this works but if header goes to the top fast, submenu is hidding below the header.
Codepen: https://codepen.io/anon/pen/PVgNER
$(window).on('scroll', function (event) {
event.preventDefault();
var headerHeight = $('.header').outerHeight();
$('.submenu').css('margin-top', headerHeight);
if (window.scrollY >= 100) {
$('.header').addClass('no-padd');
} else {
$('.header').removeClass('no-padd');
};
});
var headerHeight = $('.header').outerHeight();
$('.submenu').css('margin-top', headerHeight);
if ($('.submenu').length) {
var hei = ($('.header').outerHeight() + $('.submenu').outerHeight());
$('.page-content').css('margin-top', hei);
} else {
var hei = $('.header').outerHeight();
$('.page-content').css('margin-top', hei);
}
$(window).on('resize', function() {
if ($('.submenu').length) {
var hei = ($('.header').outerHeight() + $('.submenu').outerHeight());
$('.page-content').css('margin-top', hei);
}
var headerHeight = $('.header').outerHeight();
$('.submenu').css('margin-top', headerHeight);
});
.bg-black {
background-color: gray;
}
.header {
padding-top: 25px;
padding-bottom: 25px;
position: fixed;
top: 0;
z-index: 9999;
transition: all .1s;
}
.no-padd {
padding-top: 0;
padding-bottom: 0;
}
.header a {
color: #000;
font-size: 15px;
font-weight: 300;
text-decoration: none;
transition: all .1s;
}
.header a:hover {
color: #cba168;
}
nav ul {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
margin: 0;
list-style-type: none;
}
nav ul li {
padding-left: 15px;
padding-right: 15px;
}
nav ul li a{
display: block;
text-transform: uppercase;
text-align: center;
color: #ffffff;
padding-bottom: 15px;
padding-top: 15px;
transition: all .3s ;
}
.header-phone,
.header-socials {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.header-phone a:after,
.header-socials a:after {
content: '';
display: block;
position: absolute;
border-right: 1px solid #cba168;
height: 100%;
top: 0;
right:0;
}
.header-phone i {
margin-right: 5px;
}
.header-socials a {
margin-right: 10px;
}
.bg-brown {
background-color: #252525;
}
.submenu {
position: fixed;
top: 0%;
z-index: 99;
transition: all .1s;
}
.submenu ul {
display: flex;
align-items: center;
list-style-type: none;
justify-content: flex-start;
padding-left: 25%;
margin: 0;
}
.submenu ul li a {
color: #fff;
font-size: 15px;
text-decoration: none;
display: block;
padding: 15px 35px;
transition: all .3s;
}
.submenu ul li:hover a {
color: #cba168;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<header>
<div class="container-fluid themewidth bg-black header" id='header'>
<div class="row">
<div class="col-6 col-lg-2 d-flex align-items-center justify-content-center logo">
<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" width=50; alt="">
</div>
<div class="col-lg-6 pl-4 main-menu d-flex justify-content-center align-items-center">
<nav><ul><li><a href=''>header 1</a></li><li><a href=''>header 2</a></li><li><a href=''>header 3</a></li></ul></nav>
</div>
<div class="col-6 col-lg-4 pr-0 pl-0 d-flex justify-content-center align-items-center">
<div class='header-phone pr-4 pl-4'>
<a href='tel:+121212'>
<i class="fas fa-phone fa-rotate-90"></i><span>+12 12 12 12</span>
</a>
</div>
<div class='header-socials pr-4 pl-4'>
<i class="fab fa-facebook"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-pinterest"></i>
<i class="fab fa-linkedin-in"></i>
</div>
</div>
</div>
</div>
</header>
<div class="container-fluid bg-brown submenu">
<div class="row">
<div class="col-12">
<nav>
<ul>
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
</ul>
</nav>
</div>
</div>
</div>
<main class='page-content pt-5'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tristique at dui at commodo. Sed mollis vehicula nibh, quis ultrices diam laoreet eget. Duis vitae dignissim lectus, ut porta tortor. Aenean pulvinar aliquet elit, at tempus ante auctor nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae nibh at augue placerat placerat. Nam ornare, risus eget auctor condimentum, leo justo porttitor magna, ac ornare neque felis eu nulla. Etiam erat orci, accumsan at volutpat in, tempus ut velit. Morbi velit tortor, porttitor a velit eu, dictum pellentesque dui. Duis dignissim nisl ac odio tempus, ac fermentum sapien eleifend. Nunc in leo eu tellus aliquam ultrices ac eu nibh. Maecenas iaculis condimentum nisl, nec lobortis lectus sodales non. Aliquam nisi massa, tempus sit amet orci at, vulputate ultricies nisl.
Fusce hendrerit felis nibh, sed mattis nibh mollis eget. Praesent pretium velit erat. Phasellus pellentesque nunc sit amet efficitur bibendum. Fusce vitae metus laoreet, tincidunt est a, accumsan lorem. Fusce augue lorem, luctus vitae vehicula ut, aliquet id leo. Nunc massa turpis, interdum ut erat id, congue vulputate tellus. Integer nec tincidunt arcu. Etiam suscipit pharetra dapibus. Donec eu velit ultricies, cursus ligula at, vulputate arcu. Fusce tristique efficitur ultrices. Vivamus volutpat erat vel feugiat tincidunt. Aenean dictum nec diam non consectetur. Fusce elementum eros vitae nisl euismod gravida. Nullam scelerisque, leo ac varius lacinia, arcu ante ultricies elit, vel tempus risus ante ac augue. Quisque id dui ac ex bibendum gravida. Integer auctor, felis non porta mollis, turpis lorem egestas libero, in iaculis libero turpis varius mi.
Donec in sem in neque pulvinar egestas sit amet et eros. Integer sit amet purus tortor. Nam venenatis aliquet tellus, quis faucibus lacus ornare ut. Nulla dictum feugiat ante id aliquam. Cras interdum ligula id orci euismod, ut accumsan felis pharetra. Pellentesque ut eros a nisi porta viverra. Suspendisse et aliquam dui.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tristique at dui at commodo. Sed mollis vehicula nibh, quis ultrices diam laoreet eget. Duis vitae dignissim lectus, ut porta tortor. Aenean pulvinar aliquet elit, at tempus ante auctor nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae nibh at augue placerat placerat. Nam ornare, risus eget auctor condimentum, leo justo porttitor magna, ac ornare neque felis eu nulla. Etiam erat orci, accumsan at volutpat in, tempus ut velit. Morbi velit tortor, porttitor a velit eu, dictum pellentesque dui. Duis dignissim nisl ac odio tempus, ac fermentum sapien eleifend. Nunc in leo eu tellus aliquam ultrices ac eu nibh. Maecenas iaculis condimentum nisl, nec lobortis lectus sodales non. Aliquam nisi massa, tempus sit amet orci at, vulputate ultricies nisl.
Fusce hendrerit felis nibh, sed mattis nibh mollis eget. Praesent pretium velit erat. Phasellus pellentesque nunc sit amet efficitur bibendum. Fusce vitae metus laoreet, tincidunt est a, accumsan lorem. Fusce augue lorem, luctus vitae vehicula ut, aliquet id leo. Nunc massa turpis, interdum ut erat id, congue vulputate tellus. Integer nec tincidunt arcu. Etiam suscipit pharetra dapibus. Donec eu velit ultricies, cursus ligula at, vulputate arcu. Fusce tristique efficitur ultrices. Vivamus volutpat erat vel feugiat tincidunt. Aenean dictum nec diam non consectetur. Fusce elementum eros vitae nisl euismod gravida. Nullam scelerisque, leo ac varius lacinia, arcu ante ultricies elit, vel tempus risus ante ac augue. Quisque id dui ac ex bibendum gravida. Integer auctor, felis non porta mollis, turpis lorem egestas libero, in iaculis libero turpis varius mi.
Donec in sem in neque pulvinar egestas sit amet et eros. Integer sit amet purus tortor. Nam venenatis aliquet tellus, quis faucibus lacus ornare ut. Nulla dictum feugiat ante id aliquam. Cras interdum ligula id orci euismod, ut accumsan felis pharetra. Pellentesque ut eros a nisi porta viverra. Suspendisse et aliquam dui.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tristique at dui at commodo. Sed mollis vehicula nibh, quis ultrices diam laoreet eget. Duis vitae dignissim lectus, ut porta tortor. Aenean pulvinar aliquet elit, at tempus ante auctor nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae nibh at augue placerat placerat. Nam ornare, risus eget auctor condimentum, leo justo porttitor magna, ac ornare neque felis eu nulla. Etiam erat orci, accumsan at volutpat in, tempus ut velit. Morbi velit tortor, porttitor a velit eu, dictum pellentesque dui. Duis dignissim nisl ac odio tempus, ac fermentum sapien eleifend. Nunc in leo eu tellus aliquam ultrices ac eu nibh. Maecenas iaculis condimentum nisl, nec lobortis lectus sodales non. Aliquam nisi massa, tempus sit amet orci at, vulputate ultricies nisl.
Fusce hendrerit felis nibh, sed mattis nibh mollis eget. Praesent pretium velit erat. Phasellus pellentesque nunc sit amet efficitur bibendum. Fusce vitae metus laoreet, tincidunt est a, accumsan lorem. Fusce augue lorem, luctus vitae vehicula ut, aliquet id leo. Nunc massa turpis, interdum ut erat id, congue vulputate tellus. Integer nec tincidunt arcu. Etiam suscipit pharetra dapibus. Donec eu velit ultricies, cursus ligula at, vulputate arcu. Fusce tristique efficitur ultrices. Vivamus volutpat erat vel feugiat tincidunt. Aenean dictum nec diam non consectetur. Fusce elementum eros vitae nisl euismod gravida. Nullam scelerisque, leo ac varius lacinia, arcu ante ultricies elit, vel tempus risus ante ac augue. Quisque id dui ac ex bibendum gravida. Integer auctor, felis non porta mollis, turpis lorem egestas libero, in iaculis libero turpis varius mi.
Donec in sem in neque pulvinar egestas sit amet et eros. Integer sit amet purus tortor. Nam venenatis aliquet tellus, quis faucibus lacus ornare ut. Nulla dictum feugiat ante id aliquam. Cras interdum ligula id orci euismod, ut accumsan felis pharetra. Pellentesque ut eros a nisi porta viverra. Suspendisse et aliquam dui.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tristique at dui at commodo. Sed mollis vehicula nibh, quis ultrices diam laoreet eget. Duis vitae dignissim lectus, ut porta tortor. Aenean pulvinar aliquet elit, at tempus ante auctor nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae nibh at augue placerat placerat. Nam ornare, risus eget auctor condimentum, leo justo porttitor magna, ac ornare neque felis eu nulla. Etiam erat orci, accumsan at volutpat in, tempus ut velit. Morbi velit tortor, porttitor a velit eu, dictum pellentesque dui. Duis dignissim nisl ac odio tempus, ac fermentum sapien eleifend. Nunc in leo eu tellus aliquam ultrices ac eu nibh. Maecenas iaculis condimentum nisl, nec lobortis lectus sodales non. Aliquam nisi massa, tempus sit amet orci at, vulputate ultricies nisl.
Fusce hendrerit felis nibh, sed mattis nibh mollis eget. Praesent pretium velit erat. Phasellus pellentesque nunc sit amet efficitur bibendum. Fusce vitae metus laoreet, tincidunt est a, accumsan lorem. Fusce augue lorem, luctus vitae vehicula ut, aliquet id leo. Nunc massa turpis, interdum ut erat id, congue vulputate tellus. Integer nec tincidunt arcu. Etiam suscipit pharetra dapibus. Donec eu velit ultricies, cursus ligula at, vulputate arcu. Fusce tristique efficitur ultrices. Vivamus volutpat erat vel feugiat tincidunt. Aenean dictum nec diam non consectetur. Fusce elementum eros vitae nisl euismod gravida. Nullam scelerisque, leo ac varius lacinia, arcu ante ultricies elit, vel tempus risus ante ac augue. Quisque id dui ac ex bibendum gravida. Integer auctor, felis non porta mollis, turpis lorem egestas libero, in iaculis libero turpis varius mi.
Donec in sem in neque pulvinar egestas sit amet et eros. Integer sit amet purus tortor. Nam venenatis aliquet tellus, quis faucibus lacus ornare ut. Nulla dictum feugiat ante id aliquam. Cras interdum ligula id orci euismod, ut accumsan felis pharetra. Pellentesque ut eros a nisi porta viverra. Suspendisse et aliquam dui.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tristique at dui at commodo. Sed mollis vehicula nibh, quis ultrices diam laoreet eget. Duis vitae dignissim lectus, ut porta tortor. Aenean pulvinar aliquet elit, at tempus ante auctor nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae nibh at augue placerat placerat. Nam ornare, risus eget auctor condimentum, leo justo porttitor magna, ac ornare neque felis eu nulla. Etiam erat orci, accumsan at volutpat in, tempus ut velit. Morbi velit tortor, porttitor a velit eu, dictum pellentesque dui. Duis dignissim nisl ac odio tempus, ac fermentum sapien eleifend. Nunc in leo eu tellus aliquam ultrices ac eu nibh. Maecenas iaculis condimentum nisl, nec lobortis lectus sodales non. Aliquam nisi massa, tempus sit amet orci at, vulputate ultricies nisl.
Fusce hendrerit felis nibh, sed mattis nibh mollis eget. Praesent pretium velit erat. Phasellus pellentesque nunc sit amet efficitur bibendum. Fusce vitae metus laoreet, tincidunt est a, accumsan lorem. Fusce augue lorem, luctus vitae vehicula ut, aliquet id leo. Nunc massa turpis, interdum ut erat id, congue vulputate tellus. Integer nec tincidunt arcu. Etiam suscipit pharetra dapibus. Donec eu velit ultricies, cursus ligula at, vulputate arcu. Fusce tristique efficitur ultrices. Vivamus volutpat erat vel feugiat tincidunt. Aenean dictum nec diam non consectetur. Fusce elementum eros vitae nisl euismod gravida. Nullam scelerisque, leo ac varius lacinia, arcu ante ultricies elit, vel tempus risus ante ac augue. Quisque id dui ac ex bibendum gravida. Integer auctor, felis non porta mollis, turpis lorem egestas libero, in iaculis libero turpis varius mi.
Donec in sem in neque pulvinar egestas sit amet et eros. Integer sit amet purus tortor. Nam venenatis aliquet tellus, quis faucibus lacus ornare ut. Nulla dictum feugiat ante id aliquam. Cras interdum ligula id orci euismod, ut accumsan felis pharetra. Pellentesque ut eros a nisi porta viverra. Suspendisse et aliquam dui.
</p>
</main>

You are taking it a long way.
you can do this easily using CSS.
Remove scroll function in Javascript and use the below code
.submenu ul{
position: -webkit-sticky;
position: sticky;
top: 0;
}
You can refer the link below.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sticky_element
Thanks

Background blur on opening box

I'm trying to create a div which opens up on the center of the page and also blurs out everything behind the div. It should not blur the content of the div.
Most answers on this questions are the suggestion of using a background image.
The background should not be an image but whatever is behind at the moment the div is opened. Is there no attribute which blurs underlying content or an if statement I can use?

What you are looking for is to wrap the page contents with all else except your modal, and adding the class .blur from my attached code.
The modal should not be a child of the blurrable content therefore, when you open modal and add blur, you achieve the desired effect
.blur {
position: fixed;
top: 0; left: 0;
width: 100vw;
height: 100vh;
padding: 40px;
background: rgba(0,0,0,0.4);
filter: blur(5px);
}
.myModal {
position: fixed;
top: 50%;
left: 50%;
width: 400px;
height: 150px;
padding: 40px;
transform: translate(-50%, -50%);
background: beige;
}
<body>
<div class="blur">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor congue enim a mattis. Etiam cursus a nisi quis feugiat. Duis pellentesque pharetra neque, at euismod augue bibendum vel. Mauris ornare mi placerat sapien facilisis dictum. Nam varius metus quis ultrices ultrices. Quisque gravida rhoncus turpis in viverra. Etiam sit amet orci malesuada magna vehicula interdum. Sed tellus ante, facilisis vel purus vitae, sodales mollis justo. Nullam vel libero sed diam luctus auctor ut ultricies tortor. Fusce porttitor volutpat venenatis. Curabitur a blandit erat. Duis mattis ornare nisl. Donec vestibulum quam sed consequat mollis. In eget aliquet metus. Sed imperdiet eros sit amet ullamcorper malesuada.
</p><p>
Fusce euismod sem a erat molestie, non mattis lorem dapibus. Donec tincidunt odio nec eleifend accumsan. Vestibulum quis justo sit amet lacus vehicula finibus nec in massa. Quisque ut luctus lacus. Proin eu elit laoreet, egestas neque at, tempus magna. Sed ac felis lacinia, luctus est at, iaculis mauris. Donec sit amet luctus lectus, nec cursus felis. Pellentesque pretium augue dui, tempor convallis dui placerat id. Donec vitae ex erat. Suspendisse non tincidunt ante. Vestibulum a risus vitae tortor vulputate placerat. Pellentesque pharetra bibendum lacus, in euismod dolor tempus eget. Donec imperdiet nisi sit amet mauris scelerisque laoreet. Pellentesque aliquet venenatis interdum. Aenean in augue diam.
</p><p>
Nullam tempus nec arcu vitae rutrum. Vivamus ipsum felis, finibus sit amet mauris ac, tempus dictum mi. Integer sollicitudin sollicitudin interdum. Nam semper sit amet felis eu viverra. Proin condimentum ante risus, at hendrerit urna elementum ac. Curabitur elementum, erat et sodales lobortis, dui tellus molestie urna, a molestie elit lorem at arcu. Ut nulla dui, vulputate ac ipsum sit amet, dignissim fringilla velit. Donec dignissim pretium dignissim. Nulla pulvinar faucibus velit. Ut commodo maximus velit, a hendrerit leo eleifend eget. Donec sed vestibulum diam, quis rhoncus tellus. Nunc nec congue orci, non semper nibh. Vivamus nec lorem lorem. Donec interdum egestas magna, non imperdiet nibh placerat ut.
</p><p>
Donec lacinia pretium imperdiet. Sed elementum pulvinar maximus. Nullam tempor mattis dapibus. Maecenas vitae erat lobortis, luctus est vel, finibus enim. Pellentesque varius feugiat volutpat. Ut sit amet consectetur elit, at mollis leo. Aenean et commodo libero. Curabitur ac elit lorem. Cras eget quam pretium, porta nisi at, sollicitudin est. Donec in mi vitae urna dignissim hendrerit. Mauris euismod nibh et risus blandit blandit. Suspendisse vitae varius nisi. Vestibulum sem lorem, dictum in ultricies ac, tincidunt eu ex. Fusce sed iaculis mi. Sed eu enim convallis, interdum est eu, mattis risus.
</p><p>
Morbi eget quam feugiat, porta ante ac, maximus mauris. Quisque iaculis risus urna, ut suscipit ipsum consequat sed. Nunc convallis vitae nulla non tempus. Praesent placerat velit a odio facilisis lacinia. Maecenas et auctor nunc. Ut eu libero eget lacus sollicitudin porttitor ac in velit. Nunc luctus vestibulum dignissim. Sed tristique est quis mi tempus dictum.
</p>
</div>
<div class="myModal">
Morbi eget quam feugiat, porta ante ac, maximus mauris. Quisque iaculis risus urna, ut suscipit ipsum consequat sed. Nunc convallis vitae nulla non tempus. Praesent placerat velit a odio facilisis lacinia. Maecenas et auctor nunc. Ut eu libero eget lacus sollicitudin porttitor ac in velit. Nunc luctus vestibulum dignissim. Sed tristique est quis mi tempus dictum.
</div>
</body>
Or can also be seen on CodePen https://codepen.io/ClayC90/pen/KexqLG

Although the Modal solution offered is better, here's a simplified solution, using jquery toggleClass function.
$('#first').click(function(){
$('#first').toggleClass("open");
$('#second').toggleClass("open");
})
body{
position:relative;
height:500px;
width:500px;
z-index: -2;
}
#first{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color:blue;
filter: blur(6px);
z-index:-1;
}
#second{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: white;
}
#first.open{
filter: blur(0px);
}
#second.open{
display: none;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<body>
<div class="open" id="first"></div>
<div class="open" id="second">
Not blurred
</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);
});
});

No background colour on nav

So I created a sticky nav on scroll which works fine until it becomes a drop down menu. The link backgrounds become invisible and no longer push the content down the page. Have a look at my demo http://codepen.io/Reece_Dev/pen/VpXVMq it's fine until its 500px wide.
$(".burger-button").on("click", function(){
$("nav ul").toggleClass("showing");
});
$("nav").wrap('<div class="nav-placeholder"></div>');
$(".nav-placeholder").height($("nav").outerHeight());
jQuery(document).ready(function() {
var navOffset = jQuery('nav').offset().top;
jQuery(window).scroll(function(){
var scrollPos = jQuery(window).scrollTop();
if (scrollPos >= navOffset){
jQuery("nav").addClass("fixed");
} else{
jQuery("nav").removeClass("fixed");
}
});
});
*{
margin: 0;
padding: 0;
}
header{
width: 1200px;
margin: 0 auto;
background-color: #0000aa;
font-size: 5em;
text-align: center;
}
nav{
width: 1200px;
margin: 0 auto;
background-color: #0000ff;
}
nav ul{
overflow: hidden;
color: #fff;
text-align: center;
-webkit-transition: max-height 0.4s;
-ms-transition: max-height 0.4s;
-moz-transition: max-height 0.4s;
-o-transition: max-height 0.4s;
transition: max-height 0.4s;
}
nav ul li{
display: inline-block;
padding: 1em 2em;
}
nav ul li a{
color: inherit;
text-decoration: none;
font-size: 1.5em;
}
section{
width: 1200px;
margin: 0 auto;
line-height: 1.5em;
font-size: 1em;
text-align: center;
padding-top: 2em;
background-color: #4488ff;
}
.burger-button{
width: 100%;
background-color: white;
text-align: right;
box-sizing: border-box;
padding: 1em;
cursor: pointer;
display: none;
}
.fixed{
position: fixed;
top: 0;
left: 0;
right: 0;
}
#media screen and (max-width:1200px){
header{
width: 100%;
}
nav{
width: 100%;
}
section{
width: 100%;
}
}
#media screen and (max-width: 500px){
nav ul{
max-height: 0;
}
.showing{
max-height: 13em;
}
nav ul li{
box-sizing: border-box;
width: 100%;
}
.burger-button{
display: inline-block;
}
}
<script src="https://use.fontawesome.com/7c396dc5cb.js"></script>
<header>Logo</header>
<nav>
<div class="burger-button">
<i class="fa fa-bars fa-2x" aria-hidden="true"></i>
</div>
<ul>
<li>Welcome</li>
<li>Menu</li>
<li>Opening Times</li>
</ul>
</nav>
<section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis purus libero, fringilla non tristique at, vestibulum id magna. Ut quis porttitor ligula. Duis metus dolor, dictum vehicula ultrices vel, tristique sed dui. Nunc scelerisque diam erat, in lobortis elit convallis nec. Nam varius neque nibh, eu ultrices elit mattis id. Cras tellus libero, ornare ut lectus vel, vestibulum ultrices odio. Sed a efficitur ipsum, non pellentesque orci. Nam et quam ac odio lacinia elementum.
Quisque accumsan tempus efficitur. In sit amet ornare libero. Nunc id vehicula sapien. Nullam venenatis sapien id tortor tristique mollis. Pellentesque malesuada congue luctus. Phasellus venenatis bibendum sapien vitae ornare. Nunc ac varius ligula. Praesent dapibus justo sed nisi tristique, ac tincidunt turpis laoreet. Nulla facilisi.
Sed vehicula sapien justo, nec accumsan est vulputate nec. Vivamus dapibus eget risus ut sollicitudin. Fusce fermentum varius est, non condimentum sem interdum eget. Aenean nec mi augue. Praesent nisl ante, tincidunt in neque eu, pulvinar scelerisque dolor. Fusce elementum rhoncus dui, ut molestie purus posuere sed. Proin scelerisque purus id euismod tempus. Duis scelerisque magna ex, quis congue erat efficitur non. Nam condimentum, risus in lacinia tristique, erat est cursus lacus, porttitor scelerisque nulla ipsum a dolor. Aliquam erat volutpat. Suspendisse ut elit mauris. Quisque diam enim, scelerisque at vulputate a, pellentesque nec velit. Quisque enim nunc, suscipit dignissim dignissim ut, interdum id tellus. Nullam viverra metus nec ex condimentum, tincidunt venenatis arcu sollicitudin.
Nulla ut ullamcorper mauris, vel vehicula metus. Nam scelerisque mollis enim, nec pulvinar diam pulvinar at. Praesent sapien erat, suscipit ac erat et, suscipit efficitur nulla. Cras tempor sed lacus a cursus. Mauris interdum magna id leo pretium venenatis. Vestibulum luctus vel nulla a faucibus. Proin eu metus urna. Suspendisse eget pretium felis. Sed et justo ut nisi bibendum laoreet. Cras sed magna in neque egestas egestas. In blandit pretium libero, a lacinia diam finibus non. Ut at efficitur massa. Ut a iaculis est, sed tristique risus. Donec bibendum urna nec eros condimentum porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Ut faucibus sem in velit volutpat dapibus. Nulla laoreet purus vitae suscipit ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed ut arcu orci. Aenean sodales eu ex a posuere. Proin vitae ante sit amet mauris laoreet consectetur non ut elit. Vivamus dapibus vestibulum diam eget condimentum. Donec interdum risus id nibh posuere aliquet. Fusce sed ante et ex congue ultrices vel ac lacus. Suspendisse venenatis eget mi quis dapibus. Aenean id metus at justo accumsan tincidunt. Ut sollicitudin turpis eget mollis pretium. Suspendisse semper libero sit amet consectetur malesuada. Ut dolor justo, suscipit egestas nisi quis, scelerisque cursus leo. Integer sed turpis bibendum, dignissim quam et, vestibulum mauris.
Cras faucibus maximus mi nec sagittis. Ut ac augue in dolor hendrerit euismod posuere vitae leo. Nam ut ipsum mollis, placerat neque id, venenatis ipsum. Donec ut dignissim ligula. Vestibulum sapien purus, ultricies sed ante tristique, consectetur finibus sem. Donec dictum, ex efficitur lobortis elementum, est nisl imperdiet massa, luctus dignissim neque lacus vel nisi. Cras sollicitudin quis velit quis commodo. In pulvinar molestie leo, at maximus lacus. Etiam venenatis, ex a venenatis vestibulum, tortor urna pulvinar sem, malesuada porttitor orci tellus a nunc. Sed non feugiat elit. In ac venenatis magna. Nunc erat sem, dapibus in sem at, interdum pharetra nisi.
Vivamus quis fringilla lorem, vitae interdum risus. Cras id maximus lorem. Fusce venenatis est massa, quis feugiat nisi sagittis nec. Phasellus sed velit enim. Donec ac lectus ac libero condimentum molestie. Curabitur fermentum porttitor efficitur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin blandit magna quis ligula euismod viverra.
Aenean libero felis, varius quis sapien nec, blandit congue ligula. Curabitur risus diam, semper ac libero in, feugiat pellentesque dui. Nunc blandit lectus id justo dapibus, vel luctus arcu cursus. Integer urna felis, mollis ac auctor ut, tempor ut lorem. Nulla tincidunt sem efficitur facilisis consequat. Duis faucibus non libero nec dignissim. Etiam molestie est nec sapien cursus, quis rutrum nulla semper. Vestibulum tortor turpis, vestibulum ac dictum vel, sollicitudin vitae metus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vitae aliquet eros, ut tincidunt lacus. Pellentesque orci leo, ornare vitae felis quis, feugiat vestibulum mi. Nam semper pharetra tempus. Vivamus vel mauris tincidunt lorem varius gravida sed eu metus. Suspendisse aliquet libero nec urna bibendum ultrices. Aenean et ligula sapien. Maecenas sit amet imperdiet neque. Donec maximus semper velit, at aliquam quam tempor sed. Proin tincidunt nisi tortor, nec vulputate nulla ullamcorper vitae. Donec sodales enim eget massa consequat aliquet. Nam erat metus, molestie eget tincidunt in, consequat eu nulla. In ut tellus ut quam facilisis dapibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis purus libero, fringilla non tristique at, vestibulum id magna. Ut quis porttitor ligula. Duis metus dolor, dictum vehicula ultrices vel, tristique sed dui. Nunc scelerisque diam erat, in lobortis elit convallis nec. Nam varius neque nibh, eu ultrices elit mattis id. Cras tellus libero, ornare ut lectus vel, vestibulum ultrices odio. Sed a efficitur ipsum, non pellentesque orci. Nam et quam ac odio lacinia elementum.
Quisque accumsan tempus efficitur. In sit amet ornare libero. Nunc id vehicula sapien. Nullam venenatis sapien id tortor tristique mollis. Pellentesque malesuada congue luctus. Phasellus venenatis bibendum sapien vitae ornare. Nunc ac varius ligula. Praesent dapibus justo sed nisi tristique, ac tincidunt turpis laoreet. Nulla facilisi.
Sed vehicula sapien justo, nec accumsan est vulputate nec. Vivamus dapibus eget risus ut sollicitudin. Fusce fermentum varius est, non condimentum sem interdum eget. Aenean nec mi augue. Praesent nisl ante, tincidunt in neque eu, pulvinar scelerisque dolor. Fusce elementum rhoncus dui, ut molestie purus posuere sed. Proin scelerisque purus id euismod tempus. Duis scelerisque magna ex, quis congue erat efficitur non. Nam condimentum, risus in lacinia tristique, erat est cursus lacus, porttitor scelerisque nulla ipsum a dolor. Aliquam erat volutpat. Suspendisse ut elit mauris. Quisque diam enim, scelerisque at vulputate a, pellentesque nec velit. Quisque enim nunc, suscipit dignissim dignissim ut, interdum id tellus. Nullam viverra metus nec ex condimentum, tincidunt venenatis arcu sollicitudin.
Nulla ut ullamcorper mauris, vel vehicula metus. Nam scelerisque mollis enim, nec pulvinar diam pulvinar at. Praesent sapien erat, suscipit ac erat et, suscipit efficitur nulla. Cras tempor sed lacus a cursus. Mauris interdum magna id leo pretium venenatis. Vestibulum luctus vel nulla a faucibus. Proin eu metus urna. Suspendisse eget pretium felis. Sed et justo ut nisi bibendum laoreet. Cras sed magna in neque egestas egestas. In blandit pretium libero, a lacinia diam finibus non. Ut at efficitur massa. Ut a iaculis est, sed tristique risus. Donec bibendum urna nec eros condimentum porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Ut faucibus sem in velit volutpat dapibus. Nulla laoreet purus vitae suscipit ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed ut arcu orci. Aenean sodales eu ex a posuere. Proin vitae ante sit amet mauris laoreet consectetur non ut elit. Vivamus dapibus vestibulum diam eget condimentum. Donec interdum risus id nibh posuere aliquet. Fusce sed ante et ex congue ultrices vel ac lacus. Suspendisse venenatis eget mi quis dapibus. Aenean id metus at justo accumsan tincidunt. Ut sollicitudin turpis eget mollis pretium. Suspendisse semper libero sit amet consectetur malesuada. Ut dolor justo, suscipit egestas nisi quis, scelerisque cursus leo. Integer sed turpis bibendum, dignissim quam et, vestibulum mauris.
Cras faucibus maximus mi nec sagittis. Ut ac augue in dolor hendrerit euismod posuere vitae leo. Nam ut ipsum mollis, placerat neque id, venenatis ipsum. Donec ut dignissim ligula. Vestibulum sapien purus, ultricies sed ante tristique, consectetur finibus sem. Donec dictum, ex efficitur lobortis elementum, est nisl imperdiet massa, luctus dignissim neque lacus vel nisi. Cras sollicitudin quis velit quis commodo. In pulvinar molestie leo, at maximus lacus. Etiam venenatis, ex a venenatis vestibulum, tortor urna pulvinar sem, malesuada porttitor orci tellus a nunc. Sed non feugiat elit. In ac venenatis magna. Nunc erat sem, dapibus in sem at, interdum pharetra nisi.
Vivamus quis fringilla lorem, vitae interdum risus. Cras id maximus lorem. Fusce venenatis est massa, quis feugiat nisi sagittis nec. Phasellus sed velit enim. Donec ac lectus ac libero condimentum molestie. Curabitur fermentum porttitor efficitur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin blandit magna quis ligula euismod viverra.
Aenean libero felis, varius quis sapien nec, blandit congue ligula. Curabitur risus diam, semper ac libero in, feugiat pellentesque dui. Nunc blandit lectus id justo dapibus, vel luctus arcu cursus. Integer urna felis, mollis ac auctor ut, tempor ut lorem. Nulla tincidunt sem efficitur facilisis consequat. Duis faucibus non libero nec dignissim. Etiam molestie est nec sapien cursus, quis rutrum nulla semper. Vestibulum tortor turpis, vestibulum ac dictum vel, sollicitudin vitae metus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vitae aliquet eros, ut tincidunt lacus. Pellentesque orci leo, ornare vitae felis quis, feugiat vestibulum mi. Nam semper pharetra tempus. Vivamus vel mauris tincidunt lorem varius gravida sed eu metus. Suspendisse aliquet libero nec urna bibendum ultrices. Aenean et ligula sapien. Maecenas sit amet imperdiet neque. Donec maximus semper velit, at aliquam quam tempor sed. Proin tincidunt nisi tortor, nec vulputate nulla ullamcorper vitae. Donec sodales enim eget massa consequat aliquet. Nam erat metus, molestie eget tincidunt in, consequat eu nulla. In ut tellus ut quam facilisis dapibus.
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Is that your need ? => http://codepen.io/anon/pen/GWdJjy
nav {
position: relative; (...)
}
simply add relative position on "nav" tag element in your CSS ;)

You need to add position: relative.
The element will be positioned relative to the browser window/viewport.
nav{
width: 1200px;
margin: 0 auto;
posistion: relative;
}
http://codepen.io/Reece_Dev/pen/VpXVMq

Categories