Javascript 滚动功能不工作_Javascript_Jquery_Html_Css

Javascript 滚动功能不工作

javascript jquery html css

Javascript 滚动功能不工作,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图在滚动时动态更改div的宽度。但它不起作用。我的目录中有jquery-1.11.3.min.js，并将其与HTML文件连接。我脚本中的Scroll函数显示为棕色而不是黑色这是我的HTML文件 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="jquery-1.1

我试图在滚动时动态更改div的宽度。但它不起作用。我的目录中有jquery-1.11.3.min.js，并将其与HTML文件连接。我脚本中的Scroll函数显示为棕色而不是黑色

这是我的HTML文件

 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="BooksExchanger.css"/>
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<script src="BooksExchanger.js"></script>
<div id="packet"style="position:fixed">
<h1 id="welcome" >Welcome</p>
<h2 id="about">You Are Now Entering Into BBE</h2> 
</div>
<img src="1.jpg"/>
<img src="2.jpg"/>
</body>
</html>


欢迎光临
您现在正在进入BBE

这是我的JS文件（BooksExchanger.JS）

$（文档）.ready（函数（）{
var scroll_pos=0；
$（文档）。滚动（函数（）{
scroll_pos=$（this）.scrollTop（）；
如果（滚动位置<10）{
$（“#欢迎”）.css（'width'，75）；
}否则如果（滚动位置>25和滚动位置<75）{
$（“#欢迎”）.css（'width'，100）；
}否则如果（滚动位置>75和滚动位置<100）{
$（“#欢迎”）.css（'width'，125）；
}否则如果（滚动位置>100）{
$（“#欢迎”）.css（'width'，150）；
} 
});
});

尝试将滚动事件添加到

$（窗口）

而不是

$（文档）

其工作状况检查

$(document).ready(function(){
        var scroll_pos = 0;
                $(document).scroll(function() { 
                    scroll_pos = $(this).scrollTop();
                     if(scroll_pos < 10 ) {
                        $("#welcome").css('width', 75);
                    } else if(scroll_pos > 25 && scroll_pos < 75) {
                        $("#welcome").css('width', 100);
                    } else if(scroll_pos > 75 && scroll_pos < 100){
                        $("#welcome").css('width', 125);
                    }else if(scroll_pos > 100){
                        $("#welcome").css('width', 150);
             } 
        });
    });