Question

我想知道如何使一个固定位置的元素改变它的高度，或者更确切地说它的样式一旦它到达网页上的某个点。让我解释一下，这里有一些来自执行此事件的网站的示例。我真的只是想知道它是如何发生的以及要做到这一点的工作？

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/）

Answer 1

最简单的方法之一是使用像ScrollMagic这样的jquery插件，它允许您在滚动到网页上的某个点时固定元素。

您也可以简单地使用两个单独的代码，一个用于固定元素，另一个用于初始未固定元素，然后在用户通过切换滚动到某个点时切换代码

display:none

和

display:block.

固定元素的定位？

1 个答案: