Question

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

这是我当前未开发的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 （不要看内容，它是我们正在谈论的灰色标题。我试着查看源代码，但这并没有给我任何更多的知识。）

Answer 1

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

这是jsfiddle

＆＃13;

$(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);   
    }
});

＆＃13;

* {
    margin:0 auto;
    padding:0;
}

#header_parent {
    max-width:1250px;
    min-width:750px;
    height:50px;
    background:#000;
    position:fixed;
}

#body_parent {
     height:1200px;   
}

＆＃13;

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

＆＃13;

或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);

Answer 2

你可以在没有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块内切换类名，而不是显式设置高度。

滚动时改变div高度

2 个答案: