滚动功能不工作

Scroll Function is Not Working

本文关键字：工作 功能 滚动      更新时间：2024-04-28

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

这是我的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>

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

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

尝试将滚动事件添加到$(window)而不是$(document)

相关文章：