当用户向下滚动时，如何使标题中的文本更小? [英] How can i make text in header Smaller when user scroll down?

问题描述

我有一个更大的文本固定标题.我希望当有人向下滚动时文本变小，当滚动在顶部时返回到其大小.

向下滚动时应用的 CSS 应该是:

字体大小:15px；填充左:15%；顶部:10px；

在这里你可以看到我想让文本移动到哪里(它看起来怎么样)

我的 HTML:

<p>Účtovníctvo a zúčtovanie <br>zdravotnej starostlivosti Svit</p>

和它的 CSS

.bignadpis {z-索引:10001；font-family: 'Paytone One', sans-serif;字体样式:正常；字体粗细:正常；字体大小:30px；文本转换:大写；位置:固定；向左飘浮;填充左:5%}

感谢您的建议:)

解决方案

这可能就是您正在寻找的结果.

通过操纵 quantity 值，您可以确定何时达到15px".

var scrollCn = function(quantity){var scrollTop = (window.pageYOffset || document.scrollTop) - (document.clientTop || 0);var size = 30 - ((scrollTop/数量) || 0);如果(大小 <= 15)大小 = 15；document.querySelector('.bignadpis p').setAttribute('style', 'font-size: '+size+'px;');};window.addEventListener('scroll', function(){ scrollCn(10) });

.bignadpis {z-索引:10001；font-family: 'Paytone One', sans-serif;字体样式:正常；字体粗细:正常；字体大小:30px；文本转换:大写；位置:固定；向左飘浮;左边距:5% }html{高度:2000px；}

<p>Účtovníctvo a zúčtovanie <br>zdravotnej starostlivosti Svit</p>

关于你的第二个问题

var scrollCn = function(quantity){var scrollTop = (window.pageYOffset || document.scrollTop) - (document.clientTop || 0);var size = 30 - ((scrollTop/数量) || 0);如果(大小 <= 15)大小 = 15；document.querySelector('.bignadpis p').setAttribute('style', 'font-size: '+size+'px;');};window.addEventListener('scroll', function(){ scrollCn(10) });

.bignadpis {最大宽度:400px；z-索引:10001；font-family: 'Paytone One', sans-serif;字体样式:正常；字体粗细:正常；字体大小:30px；文本转换:大写；位置:固定；向左飘浮;左边距:5% }html{高度:2000px；}

<p>Účtovníctvo a zúčtovanie zdravotnej starostlivosti Svit - 还有更多你想要的字符串！</p>

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:

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:

<div class="bignadpis">
    <p>Účtovníctvo a zúčtovanie <br> zdravotnej starostlivosti Svit</p>
</div>

and CSS for it

.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 :)

解决方案

This may be the result you are looking for.

By manipulating the quantity value, you can determine yourself when it reaches "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>

这篇关于当用户向下滚动时，如何使标题中的文本更小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！