CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Asm Arman
Asm Arman

Reputation: 379

Scroll Function is Not Working

I tried to change the width of div dynamically while scrolling.But it is not working.I have jquery-1.11.3.min.js in my directory and connect it with HTML file.The scrollfunction in my script appears in brown color instead of black.

This is my HTML file

 <!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>

THis is my JS file(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);
             } 
        });
    });

Upvotes: 0

Views: 188

Answers (1)

Alex
Alex

Reputation: 10226

try adding the scroll event to $(window) instead of $(document)

Upvotes: 0

Related Questions