使用 JavaScript 而不是运行更改 DIV 大小

Question

我想在有人向下滚动页面时自动调整我的固定 div 菜单栏的大小。我在网上找到了一个我想要的工作示例（请参阅下面的 jsfiddle）。

然后我尝试将它实施到我的项目中..但它没有用。向下滚动没有按预期调整 div 的大小。

这是上面的代码结合我的菜单栏。

此外，我不确定我是否正确导入了这个（我已经有一段时间没有接触任何与网络相关的编码了）

<link rel="stylesheet" type="text/css" href="css.css">
<script src="js.js"></script>

我尝试使用我首先发布的 jsfiddle 并在我的电脑上复制，然后在浏览器中打开它，但它没有像在 jsfiddle 上那样工作。

有人知道我做错了什么吗？

Answer 1

您可能有旧版本的 jquery 或者您没有 include jquery 库。请包括最新的 jquery.

这是更新后的版本：https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js

演示

$(document).scroll(function(){
 'use strict';
        if ($(this).scrollTop()>45){
            // animate fixed div to small size:
            $('#nav').stop().animate({ height: 45},100);
        } else {
            //  animate fixed div to original size
            $('#nav').stop().animate({ height: 60},100);
        }
    });

body { 
 overflow-y: scroll; 
 padding: 0; 
 margin: 0; 
 font-family: Century Gothic, sans-serif;
 font-color: #5C5C3D;
 font-size: 10px; 
 background-color: #FFFFFF; 
 height: 2000px;
 }

#nav { 
 background-color: #FFFFFF;
 border-bottom: thin solid #5C5C3D; 
 position: fixed; 
 width: 100%;
 top: 0; 
 }
 
#nav-menu {
 bottom:0px;
 height:60px;
 width: 960px; 
 margin: 0 auto; 
 background: url('images/logo2.png') no-repeat bottom left;
 text-align: right;
 }
#nav ul{ list-style-type: none; padding: 0; margin: 0; }
#nav ul li{ display: inline-block; }
#nav ul li:hover{ background-color: #333; }
#nav ul li a,visited{ color: #5C5C3D; display: block; padding: 15px; text-decoration: none; }

#wrapper{ width: 960px; margin: 0 auto; text-align: left; }
#content{ background-color: #FFF; border: 3px solid #DDD; padding: 20px; margin: 80px 0 0 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
            <div id="nav-menu">
                <ul>
                    <li><a href="#">HOME</a></li>
                    <li><a href="#">COMPANY</a></li>
                    <li><a href="#">SOLUTIONS</a></li>
                    <li><a href="#">PARTNERS</a></li>
                    <li><a href="#">CONTACT US</a></li>
                </ul>
            </div>
        </div>
        
        <div id="wrapper">
            <div id="content">
                <h3>This is a heading!</h3>
                <p>You're learning how to create a fixed horizontal navigation menu!</p>
            </div>
        </div>

使用 JavaScript 而不是运行更改 DIV 大小

Change DIV size using JavaScript not running

html

javascript

css

jquery

jscript

使用 JavaScript 而不是 运行 更改 DIV 大小

Change DIV size using JavaScript not running

html

javascript

css

jquery

jscript

使用 JavaScript 而不是运行更改 DIV 大小