Develop Reference

scroll bar with horizontal scroll sticking in the body

I'm asking you for some help because I'm struggling a bit with CSS/JS, it's been a long time since I've practiced.
Basically I'm trying to make a section with a "sticky" title that scrolls horizontally with a block just below it that also stays sticky until I finish making this horizontal scrolling.
I managed to set up the structure but I think I need to add some more JS or modify what has been done. Currently I have 2 scrollbars I would like to have only one but that acts like I have two.
I put you the JSfiddle it will be more clear:
https://jsfiddle.net/ps4b10ro
const spaceHolder = document.querySelector('.space-holder');
const horizontal = document.querySelector('.horizontal');
spaceHolder.style.height = `${calcDynamicHeight(horizontal)}px`;
function calcDynamicHeight(ref) {
const vw = window.innerWidth;
const vh = window.innerHeight;
const objectWidth = ref.scrollWidth;
return objectWidth - vw + vh + 150; // 150 is the padding (in pixels) desired on the right side of the .cards container. This can be set to whatever your styles dictate
}
window.addEventListener('scroll', () => {
const sticky = document.querySelector('.sticky');
horizontal.style.transform = `translateX(-${sticky.offsetTop}px)`;
});
window.addEventListener('resize', () => {
spaceHolder.style.height = `${calcDynamicHeight(horizontal)}px`;
});
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
mousewheelControl: true,
slidesPerView: 1,
// freeMode: true,
// freeModeSticky: true
});
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 100%;
}
body {
margin: 0;
font-family: sans-serif;
}
.container {
position: relative;
width: 100%;
min-height: 100vh;
}
.space-holder {
background-color: #111;
position: relative;
width: 100%;
}
.sticky {
height: 100vh;
position: sticky;
top: 0;
height: 100vh;
width: 100%;
overflow-x: hidden;
}
.horizontal {
position: absolute;
height: 100%;
will-change: transform;
}
.cards {
position: relative;
height: fit-content;
padding: 0 0 0 150px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
}
.horizontalText {
color: #fff;
font-size: 4em;
padding: 0 3vw 0 3vw;
width: 53vw;
height: fit-content;
}
.etsy {
background-color: #fff;
margin-top: 22vh;
height: 400px;
position: sticky;
bottom: 350vh;
height: 100%;
overflow: hidden;
}
.test {
background-color: blanchedalmond;
height: 1000px;
}
<div class="test"></div>
<div class="module"></div>
<section class="container">
<div class="space-holder">
<div class="sticky">
<div class="horizontal">
<section role="feed" class="cards">
<h2 class="horizontalText">Discovers our products</h2>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="24" fill="#EDD337"/>
</svg>
<h2 class="horizontalText">Discovers our universe</h2>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="24" fill="#EDD337"/>
</svg>
<h2 class="horizontalText">Discovers our products</h2>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="24" fill="#EDD337"/>
</svg>
<h2 class="horizontalText">Discovers our universe</h2>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="24" fill="#EDD337"/>
</svg>
<h2 class="horizontalText">Discovers our products</h2>
</section>
</div>
<section class="etsy sticky">
<section id="emporter container" class="blanc hori">
<div class="wrap">
<div class="defilement">
<a href="/articles/damien-rice">
<div class="cover" style="background:url(https://cdn.blogotheque.net/blogotheque/2019/11/18/fd9c7d252ab9de5569c9fcc96aabaaff.jpg) 50% 50%">
<div><img src="/packs/media/img/play-9e06fa89856b9d33899e081448a066f5.svg" alt=""></div>
</div>
<h3>Damien Rice</h3>
<p>Soirée de Poche #54</p>
</a>
<a href="/articles/benjamin-booker-25870">
<div class="cover" style="background:url(https://cdn.blogotheque.net/blogotheque/2020/01/02/27cd1d46f726bf3e4c15a79ad42e8e0a.png) 50% 50%">
<div><img src="/packs/media/img/play-9e06fa89856b9d33899e081448a066f5.svg" alt=""></div>
</div>
<h3>Benjamin Booker</h3>
<p>Soirée de Poche #53</p>
</a>
<a href="/articles/shame">
<div class="cover" style="background:url(https://cdn.blogotheque.net/blogotheque/2019/11/18/ec085ebc867db30fc41f8be3b247ec37.jpg) 50% 50%">
<div><img src="/packs/media/img/play-9e06fa89856b9d33899e081448a066f5.svg" alt=""></div>
</div>
<h3>Shame</h3>
<p>Soirée de Poche #52</p>
</a>
<a href="/articles/hamilton-leithauser">
<div class="cover" style="background:url(https://cdn.blogotheque.net/blogotheque/2019/12/05/b56f9fbe55b912ad931376338a655440.png) 50% 50%">
<div><img src="/packs/media/img/play-9e06fa89856b9d33899e081448a066f5.svg" alt=""></div>
</div>
<h3>Hamilton Leithauser</h3>
<p>Soirée de Poche #51</p>
</a>
</div>
<div class="navigation">
<!-- <img class="pointer gauche bloque" src="img/agaucheN.svg" alt="" /> -->
<svg class="pointer gauche bloque" height="40" viewBox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#111" stroke-width="2" transform="matrix(1 0 0 -1 0 40)"><circle cx="20" cy="20" r="19"></circle><path d="m22.3823529 14-6.3823529 6.3823529 6.3823529 6.4852942"></path></g></svg>
<!-- <img class="pointer droite" src="img/agaucheN.svg" alt="" /> -->
<svg class="pointer droite" height="40" viewBox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#111" stroke-width="2" transform="matrix(1 0 0 -1 0 40)"><circle cx="20" cy="20" r="19"></circle><path d="m22.3823529 14-6.3823529 6.3823529 6.3823529 6.4852942"></path></g></svg>
<div class="progress">
<div style="transform: matrix(0.2, 0, 0, 1, 0, 0);"></div>
</div>
</div>
</div>
</section>
</section>
<div class="test">
</div>
Thank you in advance for your help and or your advice

burger doesn't work after toggling the navbar

I set opacity 0 to enable my
navbar navbar javascript
This is how it looks in css:
.nav-open {
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 24vh;
background: #ffafaf;
display: flex;
align-items: center;
justify-content: space-around;
opacity: 0;
transition: 1s ease-in-out;
}
This is the javascript code:
const navBar = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-open");
burger.addEventListener("click", () => {
nav.style.opacity = 1;
});
};
navBar();
So, when I toggle it, it looks like this.
The thing is that i can't toggle it back (I toggle it but it does not toggle back) how can I fix it?
Here is the HTML code in case you need it:
<nav>
<div class="logo">
<h1>iCosmetics</h1>
</div>
<div class="burger">
<svg
class="menu"
width="30"
height="16"
viewBox="0 0 30 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="15"
y1="15"
x2="30"
y2="15"
stroke="black"
stroke-width="2"
/>
<line x1="10" y1="8" x2="30" y2="8" stroke="black" stroke-width="2" />
<line y1="1" x2="30" y2="1" stroke="black" stroke-width="2" />
</svg>
</div>
<div class="nav-open">
<div class="contact">
<h2>Contact</h2>
<p>3108248125</p>
</div>
<div class="social">
<h2>Social</h2>
<i class="fab fa-instagram"></i>
<i class="fab fa-twitter"></i>
</div>
</div>
</nav>

You can add sub-class for actually showing the content and toggle this class on click:
document.querySelectorAll(".burger")[0].addEventListener("click", () => {
document.querySelectorAll(".nav-open")[0].classList.toggle('isOpen');
});
.nav-open {
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 24vh;
background: #ffafaf;
display: flex;
align-items: center;
justify-content: space-around;
opacity: 0;
transition: 1s ease-in-out;
}
.nav-open.isOpen { opacity: 1;}
<nav>
<div class="logo">
<h1>iCosmetics</h1>
</div>
<div class="burger">
<svg class="menu" width="30" height="16" viewBox="0 0 30 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="15" y1="15" x2="30" y2="15" stroke="black" stroke-width="2" />
<line x1="10" y1="8" x2="30" y2="8" stroke="black" stroke-width="2" />
<line y1="1" x2="30" y2="1" stroke="black" stroke-width="2" />
</svg>
</div>
<div class="nav-open">
<div class="contact">
<h2>Contact</h2>
<p>3108248125</p>
</div>
<div class="social">
<h2>Social</h2>
<i class="fab fa-instagram"></i>
<i class="fab fa-twitter"></i>
</div>
</div>
</nav>
You can learn much more here.
Enjoy code!

How to move my navbar back (I translate it on css)

I am building my navbar, i wrote the code and now i want to click on my burger and open the navbar. The thing is that I don't know how to do it, I've been trying in javascript but I can't find a solution.
const navBar = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
burger.addEventListener("click", () => {
nav.classList.add(".nav-open");
});
};
navBar();
.nav-open {
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 24vh;
background: #ffafaf;
display: flex;
align-items: center;
justify-content: space-around;
transform: translate(-100%);
}
<nav>
<div class="logo">
<h1>iCosmetics</h1>
</div>
<div class="burger">
<svg
class="menu"
width="30"
height="16"
viewBox="0 0 30 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="15"
y1="15"
x2="30"
y2="15"
stroke="black"
stroke-width="2"
/>
<line x1="10" y1="8" x2="30" y2="8" stroke="black" stroke-width="2" />
<line y1="1" x2="30" y2="1" stroke="black" stroke-width="2" />
</svg>
</div>
<div class="nav-open">
<div class="contact">
<h2>Contact</h2>
<p>3108248125</p>
</div>
<div class="social">
<h2>Social</h2>
<i class="fab fa-instagram"></i>
<i class="fab fa-twitter"></i>
</div>
</div>
</nav>
It is hidden by CSS and is supposed to be shown by JavaScript.
The JavaScript code doesn't work.
This is how it looks closed:
This is how it's supposed to look when opened:

justify-content: flex-end; and flex-direction: column; are not working together

I have a general task - put all items inside progressIcon___2kE1o by right border of the its container. For some reasons it doesn't work...
<div class="progressIcon___2kE1o" style="
padding: 0;
margin: 0;
width: 240px;
display: flex;
flex-direction: column;
/* align-items: stretch; */
justify-content: flex-end;
">
<div class="svgIconWrap___asD4K" style="
padding: 0;
margin: 0;
display: flex;
"><svg xmlns="http://www.w3.org/2000/svg" class="default___3oPC0 " filter="" fill="url(#crimes)" stroke="black" stroke-width="0" width="37px" height="26px" viewBox="0 0 37 26"><linearGradient id="crimes" gradientTransform="" x1="22" y1="25.5" x2="22" y2="10.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#dda80b"></stop><stop offset="1" stop-color="#ffdc73"></stop></linearGradient><path class="figure" d="M20.5,25.5V19.25a4.5,4.5,0,1,1,3,0V25.5Z"></path><path class="contour" d="M22,11a4,4,0,0,1,1,7.88V25H21V18.88A4,4,0,0,1,22,11m0-1a5,5,0,0,0-2,9.59V26h4V19.59A5,5,0,0,0,22,10Z" style="fill: white;"></path><path class="figure" d="M8.5,25.5v-9a1,1,0,0,0-2,0v9h-2v-9a1,1,0,0,0-2,0v9H.5V9.75L4.83,6.5H6.17L10.5,9.75V25.5Z"></path><path class="contour" d="M6,7l4,3v1H1V10L5,7H6m4,5V25H9V16.5a1.5,1.5,0,0,0-3,0V25H5V16.5a1.5,1.5,0,0,0-3,0V25H1V12h9M6.33,6H4.67l-.27.2-4,3L0,9.5V26H3V16.5a.5.5,0,0,1,1,0V26H7V16.5a.5.5,0,0,1,1,0V26h3V9.5l-.4-.3-4-3L6.33,6Z" style="fill: white;"></path><path class="figure" d="M10.5,25.5V.5h8v25Zm6-5v-3h-4v3Z"></path><path class="contour" d="M18,1V25H11V1h7M16,16h1V2H16V16m-2,0h1V2H14V16m-2,0h1V2H12V16m0,5h5V17H12v4M19,0H10V26h9V0ZM13,18h3v2H13V18Z" style="fill: white;"></path><path class="figure" d="M24.5,25.5V16.29a5.5,5.5,0,1,1,3,0V25.5Z"></path><path class="contour" d="M26,6a5,5,0,0,1,1,9.9V25H25V15.9A5,5,0,0,1,26,6m0-1a6,6,0,0,0-2,11.66V26h4V16.66A6,6,0,0,0,26,5Z" style="fill: white;"></path><path class="figure" d="M30.5,25.5V19.25a4.5,4.5,0,1,1,3,0V25.5Z"></path><path class="contour" d="M32,11a4,4,0,0,1,1,7.88V25H31V18.88A4,4,0,0,1,32,11m0-1a5,5,0,0,0-2,9.59V26h4V19.59A5,5,0,0,0,32,10Z" style="fill: white;"></path><path class="figure" d="M18.5,25.5V25a3.5,3.5,0,0,1,7,0v.5Z"></path><path class="contour" d="M22,22a3,3,0,0,1,3,3H19a3,3,0,0,1,3-3m0-1a4,4,0,0,0-4,4v1h8V25a4,4,0,0,0-4-4Z" style="fill: white;"></path><path class="figure" d="M28.5,25.5V25a4.27,4.27,0,0,1,4-4.5,4.27,4.27,0,0,1,4,4.5v.5Z"></path><path class="contour" d="M32.5,21A3.78,3.78,0,0,1,36,25H29a3.78,3.78,0,0,1,3.5-4m0-1A4.77,4.77,0,0,0,28,25v1h9V25a4.77,4.77,0,0,0-4.5-5Z" style="fill: white;"></path></svg></div>
<div class="starsWrap___2kEvv" style="
padding: 0;
margin: 0;
display: flex;
">
<div class="svgIconStar___1NY_A"><svg xmlns="http://www.w3.org/2000/svg" class="default___3oPC0 " filter="" fill="#ffac00" stroke="0" stroke-width="0" width="5px" height="5px" viewBox="0 0 5 5"><path d="M2.5,0l.59,1.82H5L3.45,2.94l.6,1.82L2.5,3.63,1,4.76l.6-1.82L0,1.82H1.91Z"></path></svg></div>
<div class="svgIconStar___1NY_A"><svg xmlns="http://www.w3.org/2000/svg" class="default___3oPC0 " filter="" fill="#ffac00" stroke="0" stroke-width="0" width="5px" height="5px" viewBox="0 0 5 5"><path d="M2.5,0l.59,1.82H5L3.45,2.94l.6,1.82L2.5,3.63,1,4.76l.6-1.82L0,1.82H1.91Z"></path></svg></div>
<div class="svgIconStar___1NY_A"><svg xmlns="http://www.w3.org/2000/svg" class="default___3oPC0 " filter="" fill="#ffac00" stroke="0" stroke-width="0" width="5px" height="5px" viewBox="0 0 5 5"><path d="M2.5,0l.59,1.82H5L3.45,2.94l.6,1.82L2.5,3.63,1,4.76l.6-1.82L0,1.82H1.91Z"></path></svg></div>
<div class="svgIconStar___1NY_A"><svg xmlns="http://www.w3.org/2000/svg" class="default___3oPC0 " filter="" fill="#ffac00" stroke="0" stroke-width="0" width="5px" height="5px" viewBox="0 0 5 5"><path d="M2.5,0l.59,1.82H5L3.45,2.94l.6,1.82L2.5,3.63,1,4.76l.6-1.82L0,1.82H1.91Z"></path></svg></div>
<div class="svgIconStar___1NY_A"><svg xmlns="http://www.w3.org/2000/svg" class="default___3oPC0 " filter="" fill="#ffac00" stroke="0" stroke-width="0" width="5px" height="5px" viewBox="0 0 5 5"><path d="M2.5,0l.59,1.82H5L3.45,2.94l.6,1.82L2.5,3.63,1,4.76l.6-1.82L0,1.82H1.91Z"></path></svg></div>
</div>
</div>

Its simple, you need to use align-items instead of justify-content since your flex-direction is set to column. Replace your css for div class progressIcon___2kE1o with this:
padding: 0;
margin: 0;
width: 240px;
display: flex;
flex-direction: column;
align-items: flex-end;

justify-content only works on flex-direction: row and flex-direction: row-reverse. In flex-direction: column you have to use align-items: flex-end;.
You can test your flexbox design in this website. http://css3generator.com/
You can test here and copy these code to your code.

When you use flex-direction: column and Justify-content: and if it's not working that means there is no space left vertically (across axis). If you want to see it working - try to give custom height (increased - say height: 400px; or more for example ) and then you will see justify-content will start reflecting.

event.offsetX during mousemove

When I move the mouse over the element I need to find the offsetX position. The problem is that when I move the mouse I'm getting the value for the child element which is present inside. Is it possible to identify the mouse position of my main object even if I move my mouse in child target?
I'm not able to use event.pageX because I'm using transform: scale(1) for the element.
$('.main').on('mousemove', function(event) {
event.preventDefault();
$(this).closest('.outer').find('p').html(event.offsetX);
});
<style> * {
margin: 0;
}
.outer {
border: 1px solid #ff0000;
float: left;
margin: 10px;
padding: 5px;
overflow: hidden
}
.inner > svg {
width: 100;
height: 100px;
}
.inner {
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
transform-origin: 0 0;
}
.two {
-ms-transform: scale(1.5);
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.three {
-ms-transform: scale(.5);
-webkit-transform: scale(.5);
transform: scale(.5);
}
p {
position: relative;
z-index: 1;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner one">
<svg style="border:1px solid #000" class="main">
<g transform="translate(10, 10)" stroke="#000000" fill="#ffffff" stroke-width="1" data-id="16">
<foreignObject style="overflow:visible;" pointer-events="all" width="100" height="100">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" pointer-events="all"></rect>
<foreignObject style="overflow:visible;" pointer-events="all" width="100%" height="100%">
<div class="labelwrapper" xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%;">
<div class="labelcontent" contenteditable="true" style="height:100%;">Sample</div>
</div>
</foreignObject>
</svg>
</foreignObject>
</g>
</svg>
</div>
<p>Value</p>
</div>
<div class="outer">
<div class="inner two">
<svg style="border:1px solid #000" class="main">
<g transform="translate(10, 10)" stroke="#000000" fill="#ffffff" stroke-width="1" data-id="16">
<foreignObject style="overflow:visible;" pointer-events="all" width="100" height="100">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" pointer-events="all"></rect>
<foreignObject style="overflow:visible;" pointer-events="all" width="100%" height="100%">
<div class="labelwrapper" xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%;">
<div class="labelcontent" contenteditable="true" style="height:100%;">Sample</div>
</div>
</foreignObject>
</svg>
</foreignObject>
</g>
</svg>
</div>
<p>Value</p>
</div>
<div class="outer">
<div class="inner three">
<svg style="border:1px solid #000" class="main">
<g transform="translate(10, 10)" stroke="#000000" fill="#ffffff" stroke-width="1" data-id="16">
<foreignObject style="overflow:visible;" pointer-events="all" width="100" height="100">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" pointer-events="all"></rect>
<foreignObject style="overflow:visible;" pointer-events="all" width="100%" height="100%">
<div class="labelwrapper" xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%;">
<div class="labelcontent" contenteditable="true" style="height:100%;">Sample</div>
</div>
</foreignObject>
</svg>
</foreignObject>
</g>
</svg>
</div>
<p>Value</p>
</div>

I Found the answer by change the script as given below.
$('.main').on('mousemove', function(event) {
event.preventDefault();
if($(event.target).attr('class')== 'main')
$(this).closest('.outer').find('p').html(event.offsetX);
else{
var val = parseInt($(event.target).closest('g').attr('transform').split(/[()]/)[1].split(',')[0]);
$(this).closest('.outer').find('p').html(event.offsetX+val);
}
});