jQuery不能唤醒我的代码

时间：2018-06-21 14:19:35

标签： javascript jquery html css

因此，我尝试在网站上添加一些jquery，并将.js文件链接到标记上方的HTML文件。

jquery的目标：在this网站中添加对实体过渡透明的导航栏。

Here是一个小提琴，它显示了我如何实现这一目标。

最后，这是我的代码段：

$(document).ready(function() {
    $(window).scroll(function() {
        if ($(document).scrollTop() > 10) {
            $('#nav').addClass('shrink');
        } else {
            $('#nav').removeClass('shrink');
        }
    });
});
/**********BODY GENERAL**********/
body {
    margin: 0;
    height: 2500px;
    /* just to demonstrate how it will looks with content */
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

/* Fix this one day */
.bg-img {
    background: url('Images/BkgImg/Abkimage.JPG') no-repeat center center;
    background-size: cover;
    height: 100vh;
}

strong {
    font-weight: bold;
}

/*********NAVIGATION*********/
@media screen and (max-width: 900px) {
    nav {
        grid-template-columns: 100%;
        grid-template-rows: auto;
        grid-gap: 1em;
    }
}

.menu1 {
    grid-column: 1;
}

.menu2 {
    grid-column: 2;
}

.logo {
    grid-column: 3;
    font-family: 'Montserrat', sans-serif;
    font-weight: lighter;
    font-size: 28px;
    width: 500px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 7vh;
    margin-bottom: 25px;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.menu3 {
    grid-column: 4;
}

.menu4 {
    grid-column: 5;
}


/**************HOVER ANIMATION**************/
div>a {
    font-family: 'Raleway';
    text-transform: uppercase;
    text-decoration: none;
    color: #000;
    position: relative;
    font-size: 0.8rem;
}

div>a:hover {
    color: #000;
}

div>a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -4px;
    left: 0;
    background-color: #000;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

div>a:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

/**********MAIN HEADER***********/
header {
    color: white;
    justify-content: center;
    align-content: center;
    top: 0;
    bottom: 0;
    left: 0;
}

/**********BODY*****************/
.Minfo {
    color: red;
    width: 100%;
    padding-top: 100px;
    font-family: 'Montserrat', sans-serif;
    font-weight: lighter;
}

.subtitle {
    padding-left: 4em;
    padding-top: 29em;
    font-size: 100%;
    color: #fff;
}

.title {
    font-size: 3em;
    text-align: left;
    color: #FFF;
    padding-bottom: 0px;
}

.subtext {
    padding-top: 0px;
    color: #FFF;
}

/************* NAV TRASPARENT TO OPAQUE ANIMATION *************/
nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 1em;
    grid-auto-rows: auto;
    text-align: center;
    align-items: center;
    background: transparent;
    */ z-index: 100;
    transition: all ease .5s;
    height: 70px;
}

.navLinks {
    transition: all ease .5s;
}

#nav.shrink .navLinks {
    padding: 10px;
    transition: all ease .5s;
}
<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>Centennial It's Academic</title>
    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
    <link href="main.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
</head>
<body>
    <div class="bg-img">
        <header>
            <div id="nav">
                <nav class="container">
                    <div class="menu1">
                        <a id="navLinks" href="#home">Home</a>
                    </div>
                    <div class="menu2">
                        <a id="navLinks" href="#upcoming">Tournaments</a>
                    </div>
                    <div class="logo">
                        <p>It's Academic</p>
                    </div>
                    <div class="menu3">
                        <a id="navLinks" href="#history">History</a>
                    </div>
                    <div class="menu4">
                        <a id="navLinks" href="#faq">Contact Info</a>
                    </div>
                </nav>
                <!-- This cluster of info -->
            </div>
        </header>

        <div class="Minfo">
            <div class="subtitle">
                CENTENNIAL<br>
                <div class="title">
                    It's Academic
                </div>
                <br>
                <div class="subtext">
                    Meets every Tuesday in Room 506
                </div>
            </div>
        </div>
    </div>
    <!-- Linking Jquery/Javascript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

如果代码段无法正常工作，那么我也可以使用github pages link来使图片和内容正常运行。

1 个答案:

答案 0 :(得分：1)

JQuery无法正常工作，因为它已加载到body中，并且应加载到html页面的head中。我还通过添加一个新的.background div添加了导航背景过渡，该div的height的过渡范围是从0到100％：

$(document).ready(function() {
    $(window).scroll(function() {
        if ($(document).scrollTop() > 10) {
            $('#nav').addClass('shrink');
        } else {
            $('#nav').removeClass('shrink');
        }
    });
});
/**********BODY GENERAL**********/
body {
    margin: 0;
    height: 2500px;
    /* just to demonstrate how it will looks with content */
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

/* Fix this one day */
.bg-img {
    background: url('Images/BkgImg/Abkimage.JPG') no-repeat center center;
    background-size: cover;
    height: 100vh;
}

strong {
    font-weight: bold;
}

/*********NAVIGATION*********/
@media screen and (max-width: 900px) {
    nav {
        grid-template-columns: 100%;
        grid-template-rows: auto;
        grid-gap: 1em;
    }
}

.menu1 {
    grid-column: 1;
}

.menu2 {
    grid-column: 2;
}

.logo {
    grid-column: 3;
    font-family: 'Montserrat', sans-serif;
    font-weight: lighter;
    font-size: 28px;
    width: 500px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 7vh;
    margin-bottom: 25px;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.menu3 {
    grid-column: 4;
}

.menu4 {
    grid-column: 5;
}


/**************HOVER ANIMATION**************/
div>a {
    font-family: 'Raleway';
    text-transform: uppercase;
    text-decoration: none;
    color: #000;
    position: relative;
    font-size: 0.8rem;
}

div>a:hover {
    color: #000;
}

div>a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -4px;
    left: 0;
    background-color: #000;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

div>a:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

/**********MAIN HEADER***********/
header {
    color: white;
    justify-content: center;
    align-content: center;
    top: 0;
    bottom: 0;
    left: 0;
}

/**********BODY*****************/
.Minfo {
    color: red;
    width: 100%;
    padding-top: 100px;
    font-family: 'Montserrat', sans-serif;
    font-weight: lighter;
}

.subtitle {
    padding-left: 4em;
    padding-top: 29em;
    font-size: 100%;
    color: #fff;
}

.title {
    font-size: 3em;
    text-align: left;
    color: #FFF;
    padding-bottom: 0px;
}

.subtext {
    padding-top: 0px;
    color: #FFF;
}

/************* NAV TRASPARENT TO OPAQUE ANIMATION *************/
nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 1em;
    grid-auto-rows: auto;
    text-align: center;
    align-items: center;
    background: transparent;
    */ z-index: 100;
    transition: all ease .5s;
    height: 70px;
    position: relative;
}

.navLinks {
    transition: all ease .5s;
}

#nav.shrink .navLinks {
    padding: 10px;
    transition: all ease .5s;
}


/*============= NEW CSS RULES ============*/

#nav {
  position: relative;
}

#nav .logo p {
  margin: 10px 0;
}

#nav .background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: #ededed;
  height: 0;
  transition: height 800ms ease;
}

#nav.shrink .background {
  height: 100%;
}
<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>Centennial It's Academic</title>
    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
    <link href="main.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
    <!-- Linking Jquery/Javascript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div class="bg-img">
        <header>
            <div id="nav">
            <!---- NEW BACKGROUND ELEMENT HERE ---->
                <div class="background"></div>
                <nav class="container">
                    <div class="menu1">
                        <a id="navLinks" href="#home">Home</a>
                    </div>
                    <div class="menu2">
                        <a id="navLinks" href="#upcoming">Tournaments</a>
                    </div>
                    <div class="logo">
                        <p>It's Academic</p>
                    </div>
                    <div class="menu3">
                        <a id="navLinks" href="#history">History</a>
                    </div>
                    <div class="menu4">
                        <a id="navLinks" href="#faq">Contact Info</a>
                    </div>
                </nav>
                <!-- This cluster of info -->
            </div>
        </header>

        <div class="Minfo">
            <div class="subtitle">
                CENTENNIAL<br>
                <div class="title">
                    It's Academic
                </div>
                <br>
                <div class="subtext">
                    Meets every Tuesday in Room 506
                </div>
            </div>
        </div>
    </div>
</body>
</html>

相关问题
最新问题