Develop Reference

align title over images in flexbox when page resized

i want to have 4 links over a list of images inside a flexbox but when i resize the page the links go through the images, i believe its because the images and the links arent "related" and therefore padding and margin doesnt work between them, but i dont know how to fix it. im guessing i have to add specific position: commands to them both to make them related but i dont know.
const chapter1 = [];
for (let i = 1; i <= 49; i++){
chapter1.push({src: `../images/maps/chapter1/${i}.jpg`, alt: `Map ${i}`});
}
const chapter2 = [{src: '../images/maps/76.jpg'}];
const chapter3 = [{src: '../images/maps/64.jpg'}];
const chapter4 = [{src: '../images/maps/98.jpg'}];
// Function to display images for the chosen chapter
function showImages(chapter) {
const img_list = document.getElementById('imageList');
img_list.replaceChildren();
// Loop through the images in the selected chapter
chapter.forEach(image => {
const li = document.createElement('li');
const img = new Image();
img.src= image.src;
img.alt=image.alt;
li.append(img);
const span = document.createElement('span');
span.textContent = "Image";
li.append(span);
img_list.appendChild(li);
});
}
// Add click event to the Chapter 1 link
document.querySelector('#chapter1').addEventListener('click', function(e) {
e.preventDefault();
showImages(chapter1);
});
// Add click event to the Chapter 2 link
document.querySelector('#chapter2').addEventListener('click', function(e) {
e.preventDefault();
showImages(chapter2);
});
document.querySelector('#chapter3').addEventListener('click', function(e) {
e.preventDefault();
showImages(chapter3);
});
document.querySelector('#chapter4').addEventListener('click', function(e) {
e.preventDefault();
showImages(chapter4);
});
window.onload = function(){
document.body.style.opacity = 1
showImages(chapter1);
}
#charset "utf-8";
/* CSS Document */
body {
background-image: url("../images/background-maps.jpg");
background-repeat: no-repeat;
background-size: cover;
padding:0;
margin:0;
opacity: 0;
transition: opacity 1s;
/*animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;*/
}
/*#keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}*/
.menu{
background-color: rgba(255,255,255,0.5);
justify-content: center;
display: flex;
margin: 0 auto;
width:55%;
height: 100%;
padding:10px;
position: relative;
}
.menu ul{
list-style-type: none;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.menu li{
width: 20%;
min-width: 200px;
margin: 15px;
text-align: center;
}
.menu img{
width: 100%;
height: 100%;
object-fit: cover;
}
.menu li span{
padding: 5px;
}
a{
font-size: 20px;
font-weight: 200;
padding:5px;
}
h1{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: 600;
font-size: 75px;
text-align: center;
text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;
margin: auto;
padding: 5px;
}
.mappages{
padding: 5px;
position: absolute;
top: 8px;
left: 16px;
}
<header>
<h1>Map Gallery</h1>
</header>
<div class="menu">
<ul id="imageList"></ul>
<div class="mappages">
Chapter 1
Chapter 2
Chapter 3
Chapter 4
</div>
</div>

Put "mappages" above the "imageList" and remove the absolute position from "mappages". Also you have to add "flex-wrap: wrap" to "menu".
<div class="menu">
<div class="mappages"></div>
<ul id="imageList"></ul>
</div>
or
If you want to keep the order of the elements as it's now, then you can still use absolute position but you have to add padding-top at least 50-60px to the parent's element "menu" to fix the overlapping

Animation in JavaScript style.top value not working as expected

I am trying to achieve parallax effect where I have almost done but I have problem in Heading tag <h1 id="text">Merry Chrismas</h1> which is not animating. <h1 id="text">Merry Chrismas</h1> goes to top when scrolling.
let text = document.getElementById('text');
let moon = document.getElementById('moon');
let snow = document.getElementById('snow');
let leftMountain = document.getElementById('left-mountain');
let rightMountain = document.getElementById('right-mountain');
let btn = document.getElementById('btn');
window.addEventListener('scroll', function() {
let value = window.scrollY;
text.style.top = value * -0.5 + '%';
moon.style.top = value * -0.5 + '%';
snow.style.top = value * 1 + 'px';
leftMountain.style.left = value * -0.5 + 'px';
rightMountain.style.left = value * 0.5 + 'px';
btn.style.marginTop = value * 2 + 'px';
})
/* To reset all margin and padding */
* {
margin: 0;
padding: 0;
}
/* Now To remove horizontal scroll bar we have to use box sizing properties */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: 'lato', sans-serif;
/* min-height: 100vh; */
background: #fff;
transition: all 0.2s linear;
color: #000;
overflow-x: hidden;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
/* position: relative;
z-index: 1000; */
}
.logo {
font-size: 2rem;
}
header a {
text-decoration: none;
padding: 10px 20px;
position: relative;
z-index: 1000;
}
header a:hover {
color: #ff556e;
}
header a.active {
border: 0.125rem solid #ff556e;
border-radius: 2rem;
color: #ff556e;
}
.hero-section {
/* position: relative; */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;
}
.hero-section h1 {
font: italic bold 4rem lato, sans-serif;
position: absolute;
}
.hero-section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
pointer-events: none;
}
#base {
transform: translateY(200px);
}
.btn {
position: absolute;
display: inline-block;
text-decoration: none;
background: #ff0;
padding: 6px 15px;
border-radius: 20px;
font-size: 1.2rem;
font-weight: bold;
transform: translateY(50px);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header id="header">
Chrismas
<nav id="navigation">
Home
Description
Features
Contact Us
</nav>
</header>
<section id="heroSection" class="hero-section">
<img src="https://i.ibb.co/R605wLx/bg.png" alt="bg" id="bg">
<img src="https://i.ibb.co/LZpM2k2/moon.png" alt="moon" id="moon">
<img src="https://i.ibb.co/QnPgdXG/snow.png" alt="snow" id="snow">
<img src="https://i.ibb.co/mGgD2s7/back-mountain.png" alt="back-mountain" id="back-mountain">
<h1 id="text">Merry Chrismas</h1>
<img src="https://i.ibb.co/wCx7SMd/left-mountain.png" alt="left-mountain" id="left-mountain">
<img src="https://i.ibb.co/4YnDZTM/right-mountain.png" alt="right-mountain" id="right-mountain">
Explore
<img src="https://i.ibb.co/3kdcSVZ/base.png" alt="base" id="base">
</section>
</body>
</html>
[JSBIN Demo]

Try modifying to this:
text.style.top = value * -0.2 + '%';
#text {
position: fixed;
top: 0;
}
You can adjust to the speed that you need

How to download customisable color change box as image with the background image?

I have a box that can change color once you select the box and then select the color.
However, there is also a background image that shows the outline of the box. I have used HTML2canvas and jquery as libraries so I can download the customise color change box as an image, but it could only be downloaded locally if the image is hidden - as shown on the CSS.
My question is, how do I download the customisable color change box with the background outline box image? - or - Is there an alternative way to save the background image and the SVG locally with download button?
//////// carousel ////////
let sliderImages = document.querySelectorAll('.slide'),
arrowLeft = document.querySelector('#arrow-left'),
arrowRight = document.querySelector('#arrow-right'),
current = 0;
//Clear all images
function reset() {
for (let i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = 'none';
}
}
// initialize slider
function startSlide() {
reset();
sliderImages[0].style.display = "block";
}
//show previous
function slideLeft() {
reset();
sliderImages[current - 1].style.display = "block";
current--;
}
//show next
function slideRight() {
reset();
sliderImages[current + 1].style.display = "block";
current++;
}
//left arrow click
arrowLeft.addEventListener('click', function() {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
});
//right arrow click
arrowRight.addEventListener('click', function() {
if (current === sliderImages.length - 1) {
current = -1;
}
slideRight();
});
startSlide();
const overlays = [];
document.querySelectorAll(".product").forEach(function(path) {
path.onclick = chooseProduct;
})
function chooseProduct(e) {
overlays.push(e.target);
overlays.forEach((overlay) => overlay.classList.add('highlight'));
}
//////// remove highlight when clicking outside of image ////////
var removeHighlight = function(e) {
var products = document.querySelectorAll('.product');
if (!e.target.classList.contains('product') && !e.target.classList.contains('color')) {
overlays.length = 0;
document.querySelectorAll('.product').forEach(function(prod) {
prod.classList.remove('highlight');
});
}
}
document.onclick = removeHighlight;
//////// remove highlight of a specific shape ////////
function chooseProduct(e) {
for (let i = 0; i < overlays.length; i += 1) {
let currentOverlay = overlays[i];
if (currentOverlay.isSameNode(e.target)) {
overlays.splice(i, 1);
e.target.classList.remove('highlight')
return;
}
}
overlays.push(e.target);
overlays.forEach((overlay) => overlay.classList.add("highlight"));
}
//////// get and set colours ////////
// Click on a color
var el = document.getElementsByClassName("color");
for (var i = 0; i < el.length; i++) {
el[i].onclick = changeColor;
}
function changeColor(e) {
// get the hex color
let hex = e.target.getAttribute("data-hex");
// set the hex color
overlays.forEach((overlay) => overlay.style.fill = hex);
}
$(document).ready(function() {
function saveScreenshot(canvas) {
var downloadLink = document.createElement('a');
downloadLink.download = 'download.jpg';
canvas.toBlob(function(blob) {
downloadLink.href = URL.createObjectURL(blob)
downloadLink.click();
});
}
$(".download-btn").on("click", function(e) {
e.preventDefault();
html2canvas(document.querySelector(".download-container"), {
scrollX: 0,
scrollY: 0
}).then(function(canvas) {
var image = canvas.toDataURL('image/jpeg');
document.getElementById("created-element").src = image;
$(this).attr('href', image);
saveScreenshot(canvas);
});
});
});
.grid-container {
display: grid;
grid-template-columns: auto 5% 1fr auto 1fr;
grid-template-rows: 128px auto 1fr auto auto auto auto 100px;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"header . . . ."
"main main main color-select color-select"
"main main main color-select color-select"
"about about about about about"
"howto howto howto howto howto"
"faqs faqs faqs faqs faqs"
"social social social social social"
"footer footer footer footer footer";
}
.header {
grid-area: header;
}
.logo {
display: inline-block;
padding-top: 20px;
padding-left: 65px;
}
.navbar {
display: inline-block;
padding-top: 50px;
padding-right: 20px;
font-family: 'Roboto Condensed', sans-serif;
line-height: 38px;
font-weight: 400;
font-size: 18px;
float: right;
}
.nav-link {
margin: 18px;
color: #212529;
text-decoration: none;
}
.main {
grid-area: main;
background-color: #f8f8f8;
padding-top: 20px;
padding-bottom: 50px;
display: flex;
text-align: center;
position: relative;
margin-top: 2.5px;
margin-left: 78px;
}
#slider,
.wrap,
.slide-content {
max-width: 1000px;
position: relative;
margin: auto;
}
.slide-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.arrow {
cursor: pointer;
position: absolute;
top: 101%;
width: 60%;
height: 0;
z-index: 1;
font-size: 20px;
color: #cccccc;
}
#arrow-left {
left: 0;
}
#arrow-right {
right: 0;
}
/* Caption text */
.text {
position: relative;
color: #212529;
font-size: 18px;
top: 28px;
width: 100%;
text-align: center;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 400;
}
.lion-number {
color: #8f8f8f;
}
.color-select {
display: flex;
align-items: center;
grid-area: color-select;
background-color: #f8f8f8;
margin-top: 2.5px;
margin-right: 78px;
padding: 10px;
}
body,
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#container {
width: 100%;
height: auto;
}
#product-svg {
position: absolute;
z-index: 2;
background-size: 100%;
background-repeat: no-repeat;
background-position: 50%;
mix-blend-mode: multiply;
width: 85%;
height: auto;
}
path {
fill: #8f8f8f;
}
.background-image {
position: relative;
z-index: 1;
width: 85%;
height: auto;
}
[data-test] {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: start;
padding-left: 15px;
padding-right: 15px;
}
[data-test] span.color {
flex-shrink: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 60px;
padding-bottom: 9px;
}
[data-test] span.color span {
height: 23px;
width: 20px;
background: var(--color);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
margin-bottom: -6px;
}
[data-test] span.color span:first-child {
margin-left: 1px;
}
.highlight {
stroke-width: 10px;
stroke: #000;
}
img {
visibility: hidden;
}
button {
font-size: 1.25em;
padding: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.2.2/html2canvas.js" integrity="sha512-Alb3nvf6wRVUhs6H8foMA8fuWAKFFretiYkk2WbrMSbAtTtNBOjKLbDIagmFVypIi4wT1pRhHwz+R/W7nU31wg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="grid-container">
<header class="header">
<img class="logo" src="logo.png" alt="">
<nav class="navbar">
About
How to
FAQs
Contact
</nav>
</header>
</div>
</div>
<main class="main">
<div class="wrap">
<div id="arrow-left" class="arrow"><span>❮</span></div>
<div id="arrow-right" class="arrow"><span>❯</span></div>
<div id="slider">
<div class="slide slide1">
<div class="slide-content">
<div id="container">
<div class="download-container">
<svg id="product-svg" viewBox="0 0 256 256">
<path id="box1" class="product" d="M24 130.25L24 235L233 235L233 25.5L24 25.5L24 130.25Z" />
</svg>
<img class="background-image" src="https://images.vexels.com/media/users/3/139342/isolated/lists/61cddf9cfe50f4baaa8f472c253d1cb4-basic-square-outline.png" alt="">
</div>
</div>
<div class="text">image1</div>
</div>
</div>
<div class="slide slide1">
<div class="slide-content"
<div id="container">
<div class="download-container">
<svg id="product-svg" viewBox="0 0 256 256">
<path id="box2" class="product" d="M24 130.25L24 235L233 235L233 25.5L24 25.5L24 130.25Z" />
</svg>
<img class="background-image" src="https://images.vexels.com/media/users/3/139342/isolated/lists/61cddf9cfe50f4baaa8f472c253d1cb4-basic-square-outline.png" alt="">
</div>
</div>
<div class="text">image2</div>
</div>
</div>
<button class="download-btn">Download element!</button>
<img src="" id="created-element" />
</main>
<section class="color-select">
<div data-test>
<span class="color red">
<span class="color-selected" style="--color: #ff6666 " data-hex="#ff6666"></span>
</span>
</div>
</section>
</div>

If you want to download an image with the background changes that you have made then you first need to convert HTML(Image and the background together) into an image using libraries like HTML2Canvas.
Libarary: https://github.com/niklasvh/html2canvas
Tutorial: https://codepedia.info/convert-html-to-image-in-jquery-div-or-table-to-jpg-png
Which would take a screenshot of the HTML that is changed on the page that you have then the image would be downloaded.

Navigation sidebar is opening but not closing when I press the button again. JavaScript

Here is the work where you can see my HTML, CSS and JavaScript codes all together.
I don't understand why side navigation wont close. I thought since the if statement opens it perfectly making an opposite version of the if statement with else if would close it too.
Any help or suggestions would be appreciated. I know there is more than one way to do these type of toggling functions on your website with javascript so whole different approach is totally ok too as long as I learn something new.
let toggleNavStatus = false;
let toggleNav = function () {
let getSidebar = document.querySelector(".nav-sidebar");
let getSidebarUl = document.querySelector(".nav-sidebar ul");
let getSidebarTitle = document.querySelector(".nav-sidebar span");
let getSidebarLinks = document.querySelectorAll(".nav-sidebar a");
/*false sidebar kapalıykenki durumu */
if (toggleNavStatus === false) {
getSidebarUl.style.visibility = "visible";
getSidebar.style.width = "272px";
getSidebarTitle.style.opacity = "0.5";
let arrayLenght = getSidebarLinks.length;
for (let i = 0; i < arrayLength; i++) {
getSidebarLinks[i].style.opacity = "1";
}
toggleNavStatus = true;
} else if (toggleNavStatus === true) {
getSidebar.style.width = "50px";
getSidebarTitle.style.opacity = "0";
let arrayLenght = getSidebarLinks.length;
for (let i = 0; i < arrayLength; i++) {
getSidebarLinks[i].style.opacity = "0";
}
getSidebarUl.style.visibility = "hidden";
toggleNavStatus = false;
}
}
body {
background-color: #f1f1f1;
margin:0;
}
.nav-main {
width: 100%;
height: 60px;
background-color: #FFF;
display: flex;
flex-wrap: flex;
z-index: 1000;
position: fixed;
top: 0;
}
.btn-toggle-nav {
width: 60px;
height: 100%;
background-color: #f98f39;
background-image: url("https://i.hizliresim.com/3h7trd3.png");
background-repeat: no-repeat;
background-size: 40%;
background-position: center;
cursor: pointer;
}
.btn-toggle-nav:hover {
opacity: 0.75;
transition-property: opacity;
transition-duration: 1s;
}
.nav-main ul {
display: flex;
flex-wrap: wrap;
padding-left: 15px;
}
.nav-main ul li {
list-style: none;
line-height: 30px;
}
.nav-main ul li a {
display: block;
height: 100%;
padding: 0px 10px;
text-transform: uppercase;
text-decoration: none;
color: #111;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
.nav-sidebar {
position: fixed;
left: 0px;
bottom: 0px;
width: 50px;
height: calc(100vh - 60px);
padding: 0 5px;
background-color: #1b1b1b;
z-index: 1000;
transition: all 0.3s ease-in-out;
}
.nav-sidebar ul {
padding: 15px;
overflow: hidden;
visibility: hidden;
}
.nav-sidebar ul li {
line-height: 60px;
list-style: none;
}
.nav-sidebar ul li span,
.nav-sidebar ul li a {
display: block;
height: 60px;
padding: 0 10px;
text-decoration: none;
text-transform: uppercase;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
white-space: nowrap;
opacity: "0";
transition: all 0.3s ease-in-out;
}
.nav-sidebar ul li a:hover {
background-color: #222;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devide-width, initail-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/resetstyle.css">
<link rel="stylesheet" href="css/stil.css">
</head>
<body>
<nav class="nav-main">
<div class="btn-toggle-nav" onclick="toggleNav()"></div>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About Us</li>
<li>Galery</li>
<li>Contacy</li>
</ul>
</nav>
<aside class="nav-sidebar">
<ul>
<li><span>Projects </span></li>
<li>Why is this</li>
<li>bar not closing back</li>
<li>when I click on</li>
<li>the button again</li>
</ul>
</aside>
</body>
<script src="main.js"></script>
</html>

How to hide an element before it reaches the top of the screen? window.onscroll = function()

< script >
document.getElementById("bottommenu").style.bottom = "-10vh";
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos < currentScrollPos) {
document.getElementById("bottommenu").style.bottom = "-10vh";
} else {
document.getElementById("bottommenu").style.bottom = "0";
}
if (currentScrollPos == 0) {
document.getElementById("bottommenu").style.bottom = "-10vh";
}
prevScrollpos = currentScrollPos;
}
<
/script>
<style>body,
html {
height: 100%;
margin: 0;
font-family: 'Karla';
font-size: 22px;
}
* {
box-sizing: border-box;
}
.container1 {
height: 10vh;
background-color: white;
z-index: 100;
position: absolute;
top: 0;
}
.header {
margin-left: 190px;
margin-top: 40px;
text-align: left;
opacity: 0.4;
z-index: 100;
}
.backgroundimage {
background-image: url("M0000-021-014_edited.jpg");
/* Full height */
height: 100vh;
/* Center and scale the image nicely */
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.7;
position: relative;
}
.leftthing {
width: calc(100% - 400px);
float: left;
}
.leftthing img {
width: 100%;
}
.clear {
clear: both;
}
.show {
display: none;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.container {
height: 10vh;
background-color: white;
}
a {
text-decoration: none;
font-family: 'Karla';
}
a:visited {
text-decoration: none;
}
/* menu*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
height: 10vh;
margin-right: 30px;
margin-bottom: 30px;
}
li {
float: right;
}
li a {
display: block;
color: black;
text-align: center;
text-decoration: none;
opacity: 0.4;
padding: 16px 16px;
margin-left: 30px;
margin-right: 30px;
transition: 0.2s;
}
li a:hover,
li a:focus {
color: black;
opacity: 1;
}
/* menu moving footer*/
#bottommenu {
position: fixed;
z-index: 100;
/* margin-left: 60px;*/
bottom: 0px;
background-color: transparent;
/* padding: 0px;*/
/* text-align: left;*/
width: 100%;
display: block;
transition: bottom 0.5s;
height: 10vh;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
</head>
<body>
<div class="backgroundimage"></div>
<div class="container1">
<div class="header">
<div class="logo" onclick="scrollWin()">|bacheva
</div>
</div>
</div>
<div class="leftthing">
<img src="82213112_611171039713397_1145784978357878784_n.jpg" alt="building concept">
<img src="INTERIOR%20RENDER.jpg" alt="interior render">
<img src="exterior%20render.jpg" alt="exterior render">
<img src="big%20ground%20floor%20plan.jpg" alt="floor plan">
<img src="READY%20CLIMATE%20SCHEME.jpg" alt="climate scheme">
</div>
<div class="clear"></div>
<div class="container">
<ul style="font-family: 'Karla';font-size:22px;">
<li>|about</li>
<li>|work</li>
<li>|home</li>
</ul>
</div>
<div id="bottommenu">
<ul style="font-size:22px;">
<li>|about</li>
<li>|work</li>
<li>|home</li>
</ul>
</div>
</body>
</html>
I have the following page:
I full-screen background picture
some content with pictures when you scroll down
and a menu on the bottom right (with a height of 10vh)
I am using a javascript function that does the following: When you scroll down the menu is not shown, but when you scroll up the content, the menu appears on the bottom right. When you reach the full-screen background picture on the top the menu is set to hide again to not obstruct the picture. However, currently when you reach the top of the page, you see the menu for a millisecond before it hides again. Therefore, my question is: Can I alternate the javascript function and tell the menu to disappear 10vh before it reaches the full-size background picture so I would not see it before it disappears when I reach the top of the page.
Here is the function I am using:
<script>
document.getElementById("bottommenu").style.bottom = "-10vh";
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos < currentScrollPos) {
document.getElementById("bottommenu").style.bottom = "-10vh";
} else {
document.getElementById("bottommenu").style.bottom = "0";
}
if (currentScrollPos == 0) {
document.getElementById("bottommenu").style.bottom = "-10vh";
}
prevScrollpos = currentScrollPos;
}
</script>
Looking at the last 'if' the menu disappears when the current scroll is '0', but I would rather have it disappear before it reaches this last possible scroll (before it reaches the full-screen background picture.)
Thank you in advance for your help.