标题在滚动100%屏幕高度调整大小
Header resize on scroll 100% screen height - javascript
这是我想添加100%而不是像素的代码。有人能帮我弄一下这个代码吗?我不擅长javascript
function init() {
window.addEventListener('scroll', function(e) {
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 100,
header = document.querySelector("header");
if (distanceY > shrinkOn) {
classie.add(header, "smaller");
} else {
if (classie.has(header, "smaller")) {
classie.remove(header, "smaller");
}
}
});
}
window.onload = init();
<header>
<div class="navcontainer">
<div id="logo"></div>
<ul id="menu">
<li data-menuanchor="firstPage"><a href="#firstPage">POČETNA</a>
</li>
<li data-menuanchor="secondPage"><a href="#secondPage">BIOGRAFIJA</a>
</li>
<li data-menuanchor="3rdPage"><a href="#3rdPage">RURALNI MOTIVI</a>
</li>
<li data-menuanchor="4thPage"><a href="#4thPage">REČNI MOTIVI</a>
</li>
<li data-menuanchor="5thPage"><a href="#5thPage">GRADSKI MOTIVI</a>
</li>
<li data-menuanchor="lastPage"><a href="#lastPage">KONTAKT</a>
</li>
</ul>
</div>
</header>
不能使用100%
,但可以使用window.innnerHeight
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = window.innerHeight,
header = document.querySelector("header");
if (distanceY > shrinkOn) {
classie.add(header,"smaller");
} else {
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
}
}
});
}
window.onload = init();
相关文章:
- ExtJS——在展开/折叠时调整面板高度
- 如何自动调整标签的高度以适应内容
- window.open根据动态内容自动调整高度和宽度
- 如何在HTML CSS JavaScript中根据纵横比调整高度或宽度
- 使 iframe 自动调整高度
- iframe 自动调整高度大小不起作用
- Iframe内容的可调整高度(在wordpress中)
- 自动调整高度为全宽度图像过滤器
- 如何调整高度时,减少宽度
- 在使用jQuery时,紧跟在ScrollTop之后调整高度是非常不稳定的
- 画布调整宽度,但不调整高度
- JavaScript自动调整高度大小
- 在移动视图中调整高度
- 调整高度&宽度以百分比而非像素表示
- JavaScript调整高度问题
- 无法在任何 DIF 上按 % 调整高度
- 自动调整高度CSS
- iframe自动调整高度作为内容的变化
- 当子块调整高度时,内联块自动适合子块宽度
- 在CSS和JS中动态调整高度