元素的固定位置?

用户名

我想知道如何使具有固定位置的元素更改其高度,或者一旦它到达网页上的某个点就改变其样式。让我解释一下,这是执行此事件的站点的一些示例。我真的只是想知道它是如何发生的以及为此做的工作?

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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

固定位置不可滚动

来自分类Dev

滚动时,固定位置元素在Chrome中闪烁

来自分类Dev

在绝对定位的叠加层上方显示固定位置元素的子元素

来自分类Dev

隐藏所有固定位置的元素

来自分类Dev

如何使固定位置的元素水平居中

来自分类Dev

固定位置元素位于绝对位置元素内

来自分类Dev

固定位置响应居中

来自分类Dev

如何确定元素是否在固定位置的容器中?

来自分类Dev

无法在移动Safari中点击固定位置元素

来自分类Dev

在特定位置停止固定元素滚动?

来自分类Dev

使iframe /表格固定位置

来自分类Dev

从相对位置更改为固定位置,无需移动元素

来自分类Dev

固定位置的元素在页面卸载时消失

来自分类Dev

固定位置填充div

来自分类Dev

固定位置元素继承弹性项目的宽度

来自分类Dev

CKeditor在线固定位置

来自分类Dev

AngularJS:在固定位置元素上显示和隐藏动画

来自分类Dev

导航栏固定位置及其对其他元素定位的影响

来自分类Dev

应用动画后元素的固定位置如何

来自分类Dev

如何在固定位置元素下方设置5px的元素位置

来自分类Dev

如何使固定位置的元素水平居中

来自分类Dev

具有固定位置的元素上的Z索引

来自分类Dev

固定位置元素位于绝对位置元素内

来自分类Dev

对齐固定位置的元素以使其水平居中

来自分类Dev

在特定位置停止固定元素滚动?

来自分类Dev

内部元素对外部元素的固定位置

来自分类Dev

过渡固定位置元素的高度

来自分类Dev

如何防止在元素位置从相对位置更改为固定位置时内容跳转

来自分类Dev

如何将子元素定位在固定位置父元素的底部