Question

我正在做一个学校项目，在 - http://harden6615.com/project1/waveland/index.html重新创建一个网站 - 而且一个小事件让我烦恼。

我有一个固定的侧边栏，一旦侧边栏滚出视图，它就会向下滑动。在所有浏览器上本地工作正常。我向下滚动，一旦窗户隐藏起来，侧边栏就会向下滑动，但是现场它全部都被抬起来了。不是真正的jquery专家，但修复像这样的问题通常会有所帮助，我无法在本地解决问题，这很好，验证也很好。有谁能看到这个问题？这是javascript：

$(function() {
            var offset = $("#sidebar").offset();
            var topPadding = 15;
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                    $("#sidebar").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $("#sidebar").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Waveland Bowl</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/reset.css" media="all" />
</head>

<body>

<div id="wrap">

<div id="header">
    <div id="logo"> Waveland Bowl </div>
    <div id="nav">
        <ul>
            <li> <a href="#"> KIDS </a> </li>
            <li> <a href="#"> ABOUT </a> </li>
            <li> <a href="#"> LEAGUES </a> </li>
            <li> <a href="#"> HOURS </a> </li>
            <li> <a href="#"> PARTIES </a> </li>
            <li> <a href="#"> FOOD </a> </li>
        </ul>
    </div> <!---nav--->
</div> <!---header--->

<div id="display-image">
    <img src="images/home page/home.jpg" alt="Waveland" title="Waveland" width="815" height="300" /></div> <!--display-image--->

<div id="section" class="clearfix">
        <div id="sidebar">
            <div id="download-info">
                <ul>
                    <li class="title"> Dowload Info </li>
                    <li> <a href="#"> Youth League </a> </li>
                    <li> <a href="#"> Private Parties </a> </li>
                    <li> <a href="#"> Cosmic Parties </a> </li>
                    <li> <a href="#"> Pricing </a> </li>
                </ul>
            </div> <!---download--->
            <div id="contact">
                <ul>
                    <li class="title"> Contact Us </li>
                    <li> <a href="#"> Email </a> </li>
                    <li> <a href="#"> Reservations </a> </li>
                    <li> <a href="#"> Facebook </a> </li>
                    <li> <a href="#"> Twitter </a> </li>
                </ul>
            </div> <!---contact--->
        </div>   <!--sidebar--->

       <!--welcome---> 
       <div id="welcome">
       <div class="ball-logo">
                <img src="images/titles/welcome.jpg" alt="welcome" width="169" height="187" /></div> <!--ball logo--->

            <div class="center">
                <p>
                    Waveland Bowl was voted Chicago's Best Bowling Center by Citysearch.com for TWO Years in a row! When 
                    you think of bowling in Chicago, do you have a vision of a smoke-filled bowling alley, or do you envision
                    a non-smoking, clean, modern, facility with state-of-the-art features such as automatic bumpers and 
                    computerized scoring on every lane?
                </p>

                <p>
                    Waveland bowl is where you want to be, whether it is for a fundraising event or a child's birthday 
                    party. Being chicago's largest bowling center your fundraiser can be more profitable and more fun here 
                    than at other venues.
                </p>
            </div>
        </div>
        <!--welcome--->

        <!--kids--->
        <div id="kids">
        <div class="ball-logo">
                <img src="images/titles/kids.jpg" alt="Kids" title="Kids" width="168" height="173" /></div>
            <div class="center">
                    <div class="col">
                        <h4> Bears Day </h4>
                        <a href="#"><img src="images/kids/home/bears.jpg" alt="Bears Day" title="Bears Day" /></a>
                    </div>
                    <div class="col">
                        <h4> Youth League </h4>
                        <a href="#"><img src="images/kids/home/youth.jpg" alt="Youth League" title="Youth League " /></a>
                    </div>
                    <div class="col">
                        <h4> Pajama Day </h4>
                        <a href="#"><img src="images/kids/home/pajama.jpg" alt="Pajama Day" title="Pajama Day" /></a>
                    </div>
                    <div class="col">
                        <h4> Halloween Day </h4>
                        <a href="#"><img src="images/kids/home/halloween.jpg" alt="Halloween Day" title="Halloween Day" /></a>
                    </div>
                    <div class="col">
                        <h4> 70s Day </h4>
                        <a href="#"><img src="images/kids/home/70s.jpg" alt="70s Day" title="70s Day" /></a>
                    </div>
                    <div class="col">
                        <h4> Crazy Hair Day </h4>
                        <a href="#"><img src="images/kids/home/crazy.gif" alt="Crazy Hair Day" title="Crazy Hair Day" /></a>
                    </div>
            </div>
         </div>
         <!--kids--->



</div> <!---section--->

<div id="footer">
    <p>
        footer
    </p>
</div> <!--footer-->

</div> <!--wrap-->
</body>
</html>

jquery事件在本地工作但不是活的

0 个答案: