Question

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

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

以上代码与我的菜单栏相结合。

另外，我不确定我是否正确导入（自从我触及任何与网络相关的编码以来已经有一段时间了）

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

我尝试首先发布的jsfiddle，然后在我的电脑上复制，然后在浏览器中打开它，它就像在jsfiddle上一样工作。

有谁知道我在这里做错了什么？

Answer 1

您可能拥有旧版本的jquery或者您没有包含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大小

1 个答案: