更改卷轴上的div高度

我想要的是顶部的div（标题），当您第一次加载页面时将处于最大高度（50px），并且当您向下滚动页面时，我希望高度平稳地减少到30px的最小高度。我猜我应该使用jQuery，但我没那么有经验，所以我现在还不知道解决方案。更改卷轴上的div高度

这是我当前的未开发HTML和CSS：

[HTML]

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/main.css"> 
    </head> 

    <body> 
     <!-- Header --> 
     <div id="header_parent"> 

     </div> 

     <!-- Body (homepage) --> 
     <div id="body_parent"> 

     </div> 

     <!-- Footer --> 
     <div id="footer_parent"> 

     </div> 

    </body> 
</html>

[CSS]

* { 
    margin:0 auto; 
    padding:0; 
} 

#header_parent { 
    max-width:1250px; 
    min-width:750px; 
    height:50px; 
}

所以要清楚，#header_parent元素是什么我谈论。

我还发现了一个网站，他们在这个网站上实现了这个事情：tvgids.tv （不要看内容，它是他们上面的灰色标题，我正在谈论。我试着看源代码，但没有给我更多的知识。）

来源

2015-02-23 YSbakker

我已添加到#body_parent高度以查看滚动，您可以在创建网站后使用高度删除该行。

这里的jsfiddle

$(window).on('scroll', function() { 
 
    var scrollTop = $(window).scrollTop(); 
 
    if (scrollTop > 50) { 
 
     $('#header_parent').stop().animate({height: "30px"},200); 
 
    } 
 
    else { 
 
     $('#header_parent').stop().animate({height: "50px"},200); 
 
    } 
 
});

* { 
 
    margin:0 auto; 
 
    padding:0; 
 
} 
 

 
#header_parent { 
 
    max-width:1250px; 
 
    min-width:750px; 
 
    height:50px; 
 
    background:#000; 
 
    position:fixed; 
 
} 
 

 
#body_parent { 
 
    height:1200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<body> 
 
    <!-- Header --> 
 
    <div id="header_parent"> 
 
     
 
    </div> 
 
    
 
    <!-- Body (homepage) --> 
 
    <div id="body_parent"> 
 
     
 
    </div> 
 
    
 
    <!-- Footer --> 
 
    <div id="footer_parent"> 
 
     
 
    </div> 
 
    
 
</body>

或HTML

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/main.css"> 
    </head> 

    <body> 
     <!-- Header --> 
     <div id="header_parent"> 

     </div> 

     <!-- Body (homepage) --> 
     <div id="body_parent"> 

     </div> 

     <!-- Footer --> 
     <div id="footer_parent"> 

     </div> 

    <!-- jQuery library --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <!-- Your jQuery/Javascript code --> 
    <script type="text/javascript"> 
    $(window).on('scroll', function() { 
     var scrollTop = $(window).scrollTop(); 
     if (scrollTop > 50) { 
      $('#header_parent').stop().animate({height: "30px"},200); 
     } 
     else { 
      $('#header_parent').stop().animate({height: "50px"},200); 
     } 
    }); 
    </script> 
    </body> 
</html>

如果你想设置平滑替换200与您的电话号码，200平均持续时间以毫秒为单位。

$('#header_parent').stop().animate({height: "50px"},200);

来源

2015-02-24 12:19:49 quead

看起来很棒，但它不完全是我的意思成为。我想让高度随着滚轮动态变化。但是，现在这是一个很好的解决方案，谢谢。 – YSbakker 2015-02-24 13:42:32

你可以做到这一点没有jQuery。

var header = document.getElementById("header_parent"); 

window.onscroll = function(e) { 
    if(window.scrollY) { 
     if(window.pageYOffset > 50) { 
      header.style.height = 30; 
     } else { 
      header.style.height = 50; 
     } 
    } 
}

您也可以在if块内切换类名，而不是明确设置高度。

来源

2015-02-23 14:50:22 Mark

看起来不错，但我把它放在哪里？ – YSbakker 2015-02-23 14:55:00

在关闭标记之前将其添加到标记中。您也可以链接到单独的

11. 无法更改div的高度jQuery的

12. 更改滚动div的高度

13. 在jQuery中更改div的高度

14. 更改div的高度 - Firefox和IE？

15. 如何动态更改div的高度？

16. jQuery zClip - 如何更改div的高度？

17. HTML无法更改Div的高度

18. 用jquery更改div的高度

19. 如何动态更改div的高度

20. 从顶部更改div的高度

21. 无法更改div的高度。

22. 将div高度更改为div div的高度点击使用JS

23. 当内容更改高度时，动态更改容器div的高度

24. 更改x轴上的刻度线

25. 根据我的div高度更改最小高度

26. 在卷轴上隐藏绝对div

27. 找到一个div的高度，并更改当前的div高度以匹配

28. 按钮单击更改div高度

29. 更改父div高度取决于使用javascript的儿童绝对div高度

30. 根据窗户内部高度更改div高度

更改卷轴上的div高度

回答

相关问题