javascript - Jquery 无法使用我的代码

标签 javascript jquery html css

所以我尝试向我的网站添加一些 jquery，并将 .js 文件链接到标签正上方的 HTML 文件。

jquery 的目标:像 this 中那样添加一个透明到实体过渡的导航栏。网站。

Here是一个 fiddle ，它展示了我是如何努力实现这一目标的。

最后，这是我的代码片段:

$(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为此，图像和内容将正常工作。

最佳答案

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>

关于javascript - Jquery 无法使用我的代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50970830/

上一篇：css - Bootstrap 4 Nav 的问题 - 对齐图标

下一篇：jquery - 将其用作背景图像后图像不太清晰

相关文章：

javascript - Karma 在 Selenium 3 hub 上进行远程测试

javascript - 如何使用相同的代码库创建具有一些共享服务和组件的另一个项目？

jquery - 将高度添加到动态创建的 div

javascript - Jquery Ajax表单没有成功消息

php - CodeIgniter + Grocery Crud - 如何将字段设置为开/关(bool，复选框)以及如何将其设置为数字的选择下拉列表(1-10)

javascript - jquery隐藏显示多个div

javascript - 在设置的变量号处停止交换 img src

javascript - 手动编辑嵌套数组

javascript - JQuery - 重新加载 Div 并在单击时调用 API

html - 需要配置什么以使文本不换行？

©2024 IT工具网  联系我们