当用户向下滚动时，如何使标题中的文本更小？
[英]How can i make text in header Smaller when user scroll down?
问题描述
I have fixed header with one bigger text.
我有一个更大的文本固定标题。 I would like the text to get smaller when someone scrolls down and returns to its size when the scroll is at the top.我希望当有人向下滚动时文本变小并在滚动位于顶部时返回到其大小。
CSS applied when scroll go down should be:向下滚动时应用的 CSS 应该是：
font-size: 15px;
padding-left: 15%;
top: 10px;
Here you can see where i want that text to move(how does it look like)在这里你可以看到我希望文本移动到哪里（它看起来如何）
My HTML:我的 HTML：
<div class="bignadpis">
<p>Účtovníctvo a zúčtovanie <br> zdravotnej starostlivosti Svit</p>
</div>
and CSS for it和 CSS
.bignadpis {
z-index: 10001;
font-family: 'Paytone One', sans-serif;
font-style: normal;
font-weight: normal;
font-size: 30px;
text-transform: uppercase;
position: fixed;
float: left;
padding-left: 5%
}
Thanks for any advice :)感谢您的任何建议:)
2 个解决方案
解决方案1
4 已采纳 2020-10-31 16:58:19
This may be the result you are looking for.这可能是您正在寻找的结果。
By manipulating the quantity value, you can determine yourself when it reaches " 15px ".通过操纵quantity值，您可以确定何时达到“ 15px ”。
var scrollCn = function(quantity) { var scrollTop = (window.pageYOffset || document.scrollTop) - (document.clientTop || 0); var size = 30 - ((scrollTop / quantity) || 0); if(size <= 15) size = 15; document.querySelector('.bignadpis p').setAttribute('style', 'font-size: '+size+'px;'); }; window.addEventListener('scroll', function(){ scrollCn(10) });
.bignadpis { z-index: 10001; font-family: 'Paytone One', sans-serif; font-style: normal; font-weight: normal; font-size: 30px; text-transform: uppercase; position: fixed; float: left; padding-left: 5% } html { height: 2000px; }
<div class="bignadpis"> <p>Účtovníctvo a zúčtovanie <br> zdravotnej starostlivosti Svit</p> </div>
For your second question对于你的第二个问题
var scrollCn = function(quantity) { var scrollTop = (window.pageYOffset || document.scrollTop) - (document.clientTop || 0); var size = 30 - ((scrollTop / quantity) || 0); if(size <= 15) size = 15; document.querySelector('.bignadpis p').setAttribute('style', 'font-size: '+size+'px;'); }; window.addEventListener('scroll', function(){ scrollCn(10) });
.bignadpis { max-width: 400px; z-index: 10001; font-family: 'Paytone One', sans-serif; font-style: normal; font-weight: normal; font-size: 30px; text-transform: uppercase; position: fixed; float: left; padding-left: 5% } html { height: 2000px; }
<div class="bignadpis"> <p>Účtovníctvo a zúčtovanie zdravotnej starostlivosti Svit - And more string you want!</p> </div>
解决方案2
2 2020-10-31 16:56:02
You can play around with this:你可以玩这个：
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; font-family: Arial, Helvetica, sans-serif; } #header { background-color: #f1f1f1; padding: 50px 10px; color: black; text-align: center; font-size: 90px; font-weight: bold; position: fixed; top: 0; width: 100%; transition: 0.2s; } </style> </head> <body> <div id="header">Header text</div> <div style="margin-top:200px;padding:15px 15px 2500px;font-size:30px"> <p>This is an example of shrinking text.</p> </div> <script> // When the user scrolls down 50px from the top of the document, resize the header's font size. You can modidy this. window.onscroll = function() { scrollFunction() }; function scrollFunction() { if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) { document.getElementById("header").style.fontSize = "30px"; } else { document.getElementById("header").style.fontSize = "90px"; } } </script> </body> </html>
It should give you the basic idea about resizing text on scroll.它应该为您提供有关在滚动时调整文本大小的基本概念。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.