文本位置垂直固定，但不是水平固定
[英]text position fixed vertically, but not horizontally
问题描述
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".它有一个标题“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]我找到了这个小提琴，这就是它应该如何工作，但不幸的是它对我不起作用：[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 -->
2 个解决方案
解决方案1
0 2021-10-14 12:42:28
Use position:fixed on the title.使用position:fixed在标题上。 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.有用的提示：不要使用 javascript 为您的元素设置动画，它不支持硬件加速，您几乎可以看到动画 FPS。
To animate anything, try to use CSS animations.要制作任何动画，请尝试使用 CSS 动画。 Just add a class to the door like .open and transition between CSS states, in your case just add:只需在门上添加一个类，如.open和 CSS 状态之间的转换，在您的情况下只需添加：
#title p1{
transition: all .5s ease;
}
.open #title p1{
left:0;
}
It'll be a noticeable smoother transition and have a faster page load这将是一个明显更平滑的过渡，并且页面加载速度更快
解决方案2
0 2021-10-14 13:35:04
I have made some changes to your CSS and HTML code and it worked as you expected.我对您的 CSS 和 HTML 代码进行了一些更改，它按您的预期工作。 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.我建议你使用弹性盒子而不是定位。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.