元素的固定位置?

用户名

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

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

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

过渡固定位置元素的高度

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

隐藏所有固定位置的元素

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

固定位置不可滚动

来自分类Dev

固定位置响应居中

来自分类Dev

使iframe /表格固定位置

来自分类Dev

CKeditor在线固定位置

来自分类Dev

固定位置填充div