On the left side of my website I have a sliding door. when you open my website the door is closed but it sticks a little bit out to the right so you can see that the door it there. It has a title on it "CV.CONTACT". Here you can see a picture:
Now the position of this title is absolute. when you click on the door, the door slides open en the title moves with it. but the problem it that when you scroll within the open door, the title also scrolls away. I want the title to be fixed in the middle. but of course when you close the door again, the title should move to the left again.
I found this fiddle, which is how it should kind of work, but unfortunately it does not work for me: [http://jsfiddle.net/7pmrrtsc/4/][2]
horizontally it is important that the title can move to the right and left. but vertically it should be fixed.
This is my code:
$("#left-door").click(function(){
if ( $(this).hasClass("isOpen") ) {
$(this).animate({
left: '-300px'
});
} else {
$(this).animate({
left: '0'
});
}
$(this).toggleClass("isOpen");
});*,
*:before,
*:after {
margin: 0;
box-sizing: border-box;
}
body,html {
height: 100%;
}
.container {
position: relative;
background-color: grey;
width: 100%;
height: 100%;
}
.content {
position: absolute;
width: 100%;
height: 100%;
background-color: lightgrey;
padding: 50px;
}
.sliding-panel {
position: fixed;
color: white;
width: 60px;
height: 100%;
z-index: 2;
}
#left-door {
font-family: helvetica;
background-color: white;
border-right: 1px solid black;
top:0;
left:-300px;
width: 350px;
overflow: auto;
}
p1{
font-family: helvetica;
font-size: 20px;
color: black;
transform: rotate(-90deg);
text-align: right;
position: absolute;
top: 45%;
right:-40px;
}
#left-door p2{
color: black;
margin-left: 40px;
text-align: left;
position:absolute;
top: 10px;
left: -20px;
width: 273px;
line-height: 20px;
}<!DOCTYPE html>
<html>
<head>
<!-- head section -->
<meta charset="utf-8">
<title>[your title here]</title>
<link href="index.css" rel="stylesheet" />
</head>
<body>
<!-- body -->
<div class="container">
<div class="content">
<!-- this is the space where the panels slide over -->
this is my content
</div>
<div id="left-door" class="sliding-panel">
<p1>CV • CONTACT</p1>
<p2>
Hi! My name is Sacha<br>
Hi! My name is Sacha<br>
Hi! My name is Sacha<br>
Hi! My name is Sacha<br>
Hi! My name is Sacha<br>
Hi! My name is Sacha<br>
Hi! My name is Sacha<br>
Hi! My name is Sacha<br>
Hi! My name is Sacha<br>
Hi! My name is Sacha<br>
Hi! My name is Sacha<br>
Hi! My name is Sacha<br>
Hi! My name is Sacha<br>
Hi! My name is Sacha<br>
Hi! My name is Sacha<br>
Hi! My name is Sacha<br>
Hi! My name is Sacha<br>
Hi! My name is Sacha<br>
Hi! My name is Sacha<br>
Hi! My name is Sacha<br>
Hi! My name is Sacha<br>
Hi! My name is Sacha<br>
Hi! My name is Sacha<br>
Hi! My name is Sacha<br>
Hi! My name is Sacha<br>
</p2>
</div>
</div>
<!-- NO HTML LAYOUT BELOW THIS POINT! -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="index.js"></script>
<!-- the body ends here -->
</body>
</html>
<!-- end of the html document, nothing to see here, move along -->CodePudding user response：
Use position:fixed on the title. Should follow when you scroll.
Useful hint: don't use javascript to animate your elements, it doesn't support Hardware Acceleration and you almost can see the animation FPS.
To animate anything, try to use CSS animations. Just add a class to the door like .open and transition between CSS states, in your case just add:
#title p1{
transition: all .5s ease;
}
.open #title p1{
left:0;
}
It'll be a noticeable smoother transition and have a faster page load
CodePudding user response：
I have made some changes to your CSS and HTML code and it worked as you expected. See the below code:
$("#left-door").click(function () {
if ($(this).hasClass("isOpen")) {
$(this).animate({
left: "-300px",
});
} else {
$(this).animate({
left: "0",
});
}
$(this).toggleClass("isOpen");
});
$(window).scroll(function (e) {
$("#title").css("left", $(window).scrollLeft() * -1);
});#left-door {
font-family: helvetica;
position: fixed;
top: 0;
left: -300px;
width: 350px;
height: 100vh;
border-right: 1px solid black;
}
#title {
height: 100%;
width: 50px;
font-family: helvetica;
font-size: 37px;
text-align: center;
writing-mode: vertical-rl;
position: absolute;
right: 0;
}
#title span:hover {
color: rgb(255, 79, 251);
}
#content {
margin-right: 50px;
}
.isOpen#left-door {
left: 0;
}
.isOpen #title {
height: 50px;
width: 100%;
text-align: center;
writing-mode: unset;
position: relative;
right: unset;
}
.isOpen #content {
margin-right: unset;
}<div id="left-door" class="sliding-panel">
<div id="title">
<span>CV • CONTACT</span>
</div>
<div id="content">
ABOUT<br />
<br />
Hi! My name is Sacha van Alfen.<br />
I am a Graphic Designer who recently graduated from the Royal Academy of
Arts with a great interest in (motion) typography, print and exhibition
design. I like to work digital as much as I like to work with print.
Projects I work on vary from playful websites to data-scraping
installations, type design, publications, broadsheets, a game about the
ecological footprint of animal agricult, motion typography and more.
<br />
<br />
<hr class="new1" />
<br />
<hr class="new1" />
<br />
CV
<br />
<br />
EDUCATION
<br />
<br />
2011 – 2016<br />
Pre-university school, N&G / C&M<br />
with German and art as electives,<br />
St. Michael College, <br />Zaandam<br />
<br />
2016 – 2017<br />
Pre-course <br />
Gerrit Rietveld Academy, <br />Amsterdam<br />
<br />
2017 – now<br />
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>I will suggest you use the flexible box instead of positioning.