我用一个更大的文本修复了标题。我希望当有人向下滚动时文本变小，并在滚动到顶部时恢复到其大小。
向下滚动时应用的 CSS 应该是：
font-size: 15px;
padding-left: 15%;
top: 10px;
我的 HTML：
<div class="bignadpis">
<p>Účtovníctvo a zúčtovanie <br> zdravotnej starostlivosti Svit</p>
</div>
以及 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%
}
感谢您的建议:)
这可能就是您正在寻找的结果。
通过操纵
quantity15pxvar 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>第二个问题
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>你可以玩这个：
<!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>它应该为您提供有关调整滚动文本大小的基本概念。