使用未运行的 JavaScript 更改 DIV 大小答案

【问题标题】：Change DIV size using JavaScript not running使用未运行的 JavaScript 更改 DIV 大小
【发布时间】：2015-07-17 17:47:11
【问题描述】：

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

http://jsfiddle.net/bnsUB/4/

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

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

http://jsfiddle.net/ynq8etnj/

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

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

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

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

【问题讨论】：

你的小提琴不起作用，因为你不包括 jQuery。 Working here.
啊，谢谢伙计！现在只是想弄清楚为什么它不能在网络浏览器中运行 o.o
你的用例是什么？这看起来像一个糟糕的 UI 设计，如果你不介意回答，我对你为什么想要这个功能感兴趣。我有兴趣看到一个有效的用例。
你好伙计，当你在动画运行时继续向下滚动时，我不禁看到你的动画是多么的笨拙。这是因为您在每次滚动事件时都会停止它。要解决此问题，只需添加一个标志以了解您是否已运行动画。这是示例。 jsfiddle.net/ee9ftfbL 有一个很好的编程伙伴。
@Sinistralis 实际上，我已经在几个网站上看到过经常使用它，我喜欢它的想法。菜单栏从大约 100 像素开始，带有大公司徽标和/或公司名称，然后随着菜单栏缩小到较小的尺寸，大约 30-45 像素。主页将包含大部分信息，并且会向下滚动很长一段距离，有点像 Apple 产品页面。尺寸缩小的菜单栏将始终保持在顶部。因此，当有人向下滚动 5-6 页时，他们不必单击“顶部”按钮或滚动回顶部即可使用菜单栏。它一直都在。

标签： javascript jquery html css jscript

【解决方案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>

【讨论】：

感谢巴文！它就像现在预期的那样工作。非常感谢兄弟。