我想知道如何使具有固定位置的元素更改其高度,或者一旦它到达网页上的某个点就改变其样式。让我解释一下,这是执行此事件的站点的一些示例。我真的只是想知道它是如何发生的以及为此做的工作?
http://www.animecenter.tv/
https://www.yahoo.com/
我已经尝试了许多方法,但是要么我做错了什么,要么解决方案实际上很简单,但我过度考虑了。
的HTML:
<header>
<div id="Logo"></div>
<nav>
<a href="#"><div class="alter-ref">exa</div></a>
<a href="#"><div class="alter-ref">exa</div></a>
<a href="#"><div class="alter-ref">exa</div></a>
<a href="#"><div class="alter-ref">exa</div></a>
<a href="#"><div class="alter-ref">exa</div></a>
</nav>
</header>
CSS:
header {
background-color:#247BC1;
width:100%;
height:80px;
border-bottom:1px solid #005fad;
position:fixed;
top:0;
left:0;
}
我已经尝试过,但显然上面列出的网站并不是我想要的效果:
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
}
else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
(由Erik Philips添加)](http://jsfiddle.net/TL927/2/)
最简单的方法之一是使用jQuery插件,例如ScrollMagic,使您可以在滚动到网页上的某个点时固定元素。
您还可以简单地使用两个单独的代码,一个用于固定元素,一个用于初始非固定元素,然后在用户通过切换滚动到特定点时切换代码
display:none
和
display:block.
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句