使用 scollTop 的 jQuery 导航-6ren

使用 scollTop 的 jQuery 导航

转载作者：太空宇宙更新时间：2023-11-03 21:35:55

我正在我的个人网站上工作，但我无法让导航正常工作。这个想法是当您使用 jQuery 函数 scrollTop 和 addClass 向下滚动一点时让导航栏下降。我已经让它在这个 CodePen 中工作:http://codepen.io/anon/pen/smoGp但是当我将它翻译到我的网站时，出现了问题。我找不到故障。任何帮助将非常感激!这是我网站的链接:http://lindseybakermedia.com/

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Lindsey Baker Media</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="fonts/stylesheet.css" type="text/css" />
</head>
<body>
    <header>
        <nav class="mainNav">
            <a href="#" id="logoLink"><img src="images/logo.svg" alt="Lindsey Baker Media Logo"></a>
            <ul>
                <li><a href="#">Work</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            <div class="clear"></div>
        </nav>
        <section id="intro">
            <img src="images/top.svg" id="introTop" alt="Lindsey Baker Background Top">
            <h1>Hello, my name is <span class="introName">Lindsey Baker.</span><br>
            I am a <span class="introProfession">web designer</span> &amp; <span class="introProfession">graphic artist.</span></h1>
            <img src="images/bottom.svg" id="introBottom" alt="Lindsey Baker Background Bottom">
        </section>
    </header>
    <main>
        <section id="gallery">
            <h2><span class="introName">Design</span> Work</h2>
            <ul class="grid">
                <li>
                    <figure>
                        <img src="images/thumbs/inkThumb.png" alt="Lindsey Baker: Got Ink?">
                        <figcaption>
                            <h3>Got Ink?</h3>
                            <span>Digital Illustration</span>
                            <a href="#">View Work</a>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="images/thumbs/gitThumb.png" alt="Lindsey Baker: ASU Microsite">
                        <figcaption>
                            <h3>ASU Microsite</h3>
                            <span>Web Design</span>
                            <a href="#">View Work</a>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="images/thumbs/disconnectThumb.png" alt="Lindsey Baker: Disconnect">
                        <figcaption>
                            <h3>Disconnect</h3>
                            <span>Photo Manipulation</span>
                            <a href="#">View Work</a>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="images/thumbs/napoleonThumb.png" alt="Lindsey Baker: Napoleon">
                        <figcaption>
                            <h3>Napoleon</h3>
                            <span>Browser Extension</span>
                            <a href="#">View Work</a>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="images/thumbs/rogueThumb.png" alt="Lindsey Baker: Rogue">
                        <figcaption>
                            <h3>Rogue</h3>
                            <span>Print Design, Branding</span>
                            <a href="">View Work</a>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="images/thumbs/backpackingThumb.png" alt="Lindsey Baker: Backpacking &amp; Adventures">
                        <figcaption>
                            <h3>Backpacking &amp; Adventures</h3>
                            <span>Web Design, Branding</span>
                            <a href="">View Work</a>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="images/thumbs/bloodhoundThumb.png" alt="Lindsey Baker: Bloodhound">
                        <figcaption>
                            <h3>Bloodbound</h3>
                            <span>Mobile Application</span>
                            <a href="#">View Work</a>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="images/thumbs/tasteThumb.png" alt="Lindsey Baker: Taste &amp; Treat">
                        <figcaption>
                            <h3>Taste &amp; Treat</h3>
                            <span>Web Design, Branding</span>
                            <a href="#">View Work</a>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="images/thumbs/jajoThumb.png" alt="Lindsey Baker: Jajo">
                        <figcaption>
                            <h3>Jajo</h3>
                            <span>Web Application</span>
                            <a href="">View Work</a>
                        </figcaption>
                    </figure>
                </li>
            </ul>
        </section>
        <section id="about">
            <article>
                <h2>More about <span class="introName">Lindsey</span></h2>
                <img src="images/lindsey.png" alt="Lindsey Baker">
                <div id="aboutPara">
                    <p>Lindsey Baker is currently a senior in the Graphic Information Techonology program at Arizona State University where she specializes in web development. She began freelance designing in 2012 and has begun working nationally with clients in Chicago and Denver. Recently, she co-founded a startup tech company where she has not only expanded her skills to UI/UX design, but has taken an interest in the entrepreneurial side of next curve technology. While the majority of Lindsey's professional experience lies in web development, her compelling, polished aesthetic has gained recognition through numberous art shows and publications. She is currently located in Scottsdale, Arizona where she will further her education and obtain her MS Tech in Technology through Arizona State University. In her spare time, Lindsey attends technology related events and is continuously bettering herself as a web and graphic designer.</p>
                    <p><a href="#">Resume</a> / <a href="#">Contact</a></p>
                </div>
                <div class="clear"></div>
            </article>
        </section>
        <section id="contact">
            <div id="form-div">
                <form class="form" id="form1">

                    <p class="name">
                        <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
                    </p>

                    <p class="email">
                        <input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
                    </p>

                    <p class="text">
                        <textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
                    </p>


                    <div class="submit">
                        <input type="submit" value="SEND" id="button-blue"/>
                    </div>
                </form>
            </div>
            <ul>
                <li id="gmail"><a href="mailto:lindseybakermedia@gmail.com">lindseybakermedia@gmail.com</a></li>
                <li id="phone"><a href="tel:4802854357">480.285.4357</a></li>
                <li id="facebook"><a href="https://www.facebook.com/lbakermedia">Facebook</a></li>
                <li id="twitter"><a href="https://twitter.com/lbakermedia">Twitter</a></li>
                <li id="linkedin"><a href="#">LinkedIn</a></li>
                <li id="instagram"><a href="#">Instagram</a></li>
            </ul>
            <div class="clear"></div>
        </section>
    </main>
    <footer>
        <p id="copyright">Copyright &copy; 2014 Lindsey Baker</p>
        <a href="http://www.lindseybakermedia.com">lindseybakermedia.com</a>
        <div class="clear"></div>
    </footer>
    <script type="text/javascript" src="js/fontsmoothie.min.js" async></script>
    <script type="text/javascript" src="js/navigation.js" async></script>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</body>
</html>

CSS:

/***** GEOGROTESQUE *****/
@import url("Geogrotesque-Thin.css");
@import url("Geogrotesque-UltraLight.css");
@import url("Geogrotesque-Light.css");
@import url("Geogrotesque-Regular.css");
@import url("Geogrotesque-Medium.css");
@import url("Geogrotesque-SemiBold.css");
@import url("Geogrotesque-Bold.css");
/***** ALL *****/
* {
  margin: 0;
  padding: 0; }

.clear {
  clear: both;
  height: 0; }

body {
  font-family: museo300, georgia;
  font-size: 16px;
  line-height: 28px;
  color: #222222;
  background-color: #fbfbfb; }

/***** INTRO *****/
section#intro {
  background-color: #37C697;
  height: 100vh;
  min-height: 500px;
  position: relative; }
  section#intro h1 {
    color: #ffffff;
    font-family: Geogrotesque-Thin;
    padding-top: 35vh;
    padding-left: 6.5%;
    padding-right: 6.5%;
    font-size: 65px;
    line-height: 75px; }
    section#intro h1 .introProfession {
      font-family: Geogrotesque-Regular; }
  section#intro img#introTop {
    position: absolute;
    top: 0;
    left: 0;
    width: 25%;
    height: auto; }
  section#intro img#introBottom {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
    height: auto; }

.introName {
  font-family: Geogrotesque-SemiBold; }

/***** NAV *****/
header nav.mainNav {
  padding: 10px 6.5%;
  position: fixed;
  top: -100px;
  z-index: 999;
  width: 87%;
  background-color: #ffffff;
  overflow: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0; }
  header nav.mainNav ul {
    list-style: none;
    float: right;
    width: 50%;
    text-align: right;
    display: table;
    vertical-align: middle; }
    header nav.mainNav ul li {
      display: inline-block;
      padding-left: 5%;
      padding-top: 40px;
      font-family: Geogrotesque-Light;
      text-transform: uppercase;
      font-size: 22px; }
      header nav.mainNav ul li a:link, header nav.mainNav ul li a:visited {
        text-decoration: none;
        color: #222222;
        transition: all 0.3s ease-in-out 0s; }
      header nav.mainNav ul li a:hover, header nav.mainNav ul li a:active {
        color: #37C697; }
  header nav.mainNav a#logoLink img {
    width: 60px;
    height: auto;
    float: left; }

header nav.sticky {
  opacity: 1;
  top: 0px; }

/***** GALLERY *****/
section#gallery {
  width: 100%; }
  section#gallery h2 {
    margin: 140px auto 0px;
    font-family: Geogrotesque-UltraLight;
    text-transform: uppercase;
    font-size: 35px;
    text-align: left;
    padding-bottom: 7px;
    border-bottom: 3px solid #37C697;
    border-radius: 1px;
    letter-spacing: -1px;
    width: 87%; }

.grid {
  padding: 20px;
  max-width: 1300px;
  margin: 0 auto;
  list-style: none;
  text-align: center; }
  .grid li {
    display: inline-block;
    width: 27%;
    margin: 0;
    padding: 2%;
    text-align: left;
    position: relative; }
  .grid figure {
    margin: 0;
    position: relative;
    overflow: hidden;
    padding: 5px;
    border: 1px solid #cccccc;
    transition: all 0.3s ease-in-out 0s;
    background-color: #ffffff; }
    .grid figure img {
      max-width: 100%;
      display: block;
      position: relative;
      transition: transform 0.4s; }
  .grid figure:hover {
    border: 1px solid #222222; }
    .grid figure:hover img {
      transform: translateY(-50px); }
    .grid figure:hover figcaption {
      opacity: 1;
      transform: translateY(0px);
      transition: transform 0.4s, opacity 0.1s; }
  .grid figcaption {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    padding: 20px;
    background-color: #222222;
    color: #37C697;
    height: 60px;
    width: 100%;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.4s, opacity 0.1s 0.3s; }
    .grid figcaption h3 {
      margin: 0;
      padding: 0;
      color: #ffffff; }
    .grid figcaption a {
      text-align: center;
      padding: 5px 10px;
      border-radius: 2px;
      display: inline-block;
      color: #ffffff;
      position: absolute;
      bottom: 20px;
      right: 60px; }
    .grid figcaption a:link, .grid figcaption a:visited {
      transition: all 0.3s ease-in-out 0s;
      background-color: #37C697;
      text-decoration: none; }
    .grid figcaption a:hover, .grid figcaption a:active {
      background-color: #2B9975; }

/***** ABOUT *****/
section#about {
  width: 87%;
  margin: 100px auto; }
  section#about a:link, section#about a:visited {
    color: #ffffff;
    background-color: #37C697;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 2px;
    transition: all 0.3s ease-in-out 0s; }
  section#about a:hover, section#about a:active {
    background-color: #2B9975; }
  section#about h2 {
    margin-bottom: 15px;
    font-family: Geogrotesque-UltraLight;
    text-transform: uppercase;
    font-size: 35px;
    text-align: right;
    padding-bottom: 7px;
    border-bottom: 3px solid #37C697;
    border-radius: 1px;
    margin-bottom: 40px;
    letter-spacing: -1px; }
  section#about img {
    float: left;
    width: 29.2%;
    height: auto;
    margin-right: 4.7%;
    padding: 5px;
    border: 1px solid #cccccc; }
  section#about #aboutPara {
    width: 64.5%;
    float: right; }
    section#about #aboutPara p {
      margin-bottom: 25px;
      text-align: justify; }

/***** CONTACT *****/
section#contact {
  background-color: #37C697;
  padding: 0 6.5%; }
  section#contact a:link, section#contact a:visited {
    color: #ffffff;
    text-decoration: none;
    background: none; }
  section#contact a:hover, section#contact a:active {
    text-decoration: underline; }

#form-div {
  float: right;
  width: 30%;
  margin: 50px 0; }

.feedback-input {
  color: #3c3c3c;
  font-family: museo300, georgia;
  font-size: 16px;
  border-radius: 2px;
  background-color: #fbfbfb;
  padding: 13px 13px 13px 54px;
  margin-bottom: 10px;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border: 3px solid transparent; }

.feedback-input:focus {
  background: #fff;
  box-shadow: 0;
  border: 3px solid #2B9975;
  color: #2B9975;
  outline: none;
  padding: 13px 13px 13px 54px; }

.focused {
  color: #30aed6;
  border: #30aed6 solid 3px; }

/* Icons ---------------------------------- */
#name {
  background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
  border-radius: 2px; }

#name:focus {
  background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
  background-size: 30px 30px;
  background-position: 8px 5px;
  background-position: 11px 8px;
  background-repeat: no-repeat; }

#email {
  background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
  border-radius: 2px; }

#email:focus {
  background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat; }

#comment {
  background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
  border-radius: 2px; }

textarea {
  width: 100%;
  height: 150px;
  line-height: 150%;
  resize: vertical; }

input:hover, textarea:hover,
input:focus, textarea:focus {
  background-color: white; }

#button-blue {
  font-family: Geogrotesque-SemiBold;
  float: left;
  width: 100%;
  border: none;
  cursor: pointer;
  background-color: #2B9975;
  color: white;
  font-size: 20px;
  padding: 10px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  margin-top: -4px;
  border-radius: 2px; }

#button-blue:hover {
  background-color: #222222; }

.submit:hover {
  color: #2B9975; }

@media only screen and (max-width: 580px) {
  #form-div {
    left: 3%;
    margin-right: 3%;
    width: 88%;
    margin-left: 0;
    padding-left: 3%;
    padding-right: 3%; } }
/***** FOOTER *****/
footer {
  background-color: #222222;
  color: #ffffff;
  padding: 3px 6.5%; }
  footer a:link, footer a:visited {
    color: #ffffff;
    text-decoration: none;
    background: none; }
  footer a:hover, footer a:active {
    text-decoration: underline; }
  footer p#copyright {
    float: left; }
  footer a {
    float: right; }

JS:

$(window).scroll(function() {

    if ($(window).scrollTop() > 100) {
        $('.mainNav').addClass('sticky');
    } else {
        $('.mainNav').removeClass('sticky');
    }
});

最佳答案

在 HTML 中包含 javascript 文件的顺序很重要。在您的 HTML 中，移动这些行 (jQuery):

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

在这些行之上:

<script type="text/javascript" src="js/fontsmoothie.min.js" async></script>
<script type="text/javascript" src="js/navigation.js" async></script>

关于使用 scollTop 的 jQuery 导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26662835/

文章推荐： c# - 在 c# httpwebrequest 中禁用主机名验证

文章推荐： c# - 如何使用 EPplus 在 excel 中获取部分单元格样式？

文章推荐： python - 简单地获取正在等待资源空闲的元素

javascript - 使用 WebScriptEndpoint 使用 javascript 使用 WCF 服务
我在网上搜索但没有找到任何合适的文章解释如何使用 javascript 使用 WCF 服务，尤其是 WebScriptEndpoint。任何人都可以对此给出任何指导吗？谢谢最佳答案这是一篇关于
c - 没有结果!!使用 fork() 使用 dup2 使用 2 个管道运行 execlp()
我正在编写一个将运行 Linux 命令的 C 程序，例如: cat/etc/passwd | grep 列表 |剪切-c 1-5 我没有任何结果 *这里 parent 等待第一个 child (chi
python - 处理文件上传，使用 Pillow 调整大小，使用 SQLAlchemy 存储，使用 Flask 提供文件
所以我正在尝试处理文件上传，然后将该文件作为二进制文件存储到数据库中。在我存储它之后，我尝试在给定的 URL 上提供文件。我似乎找不到适合这里的方法。我需要使用数据库，因为我使用 Google 应用引
excel - 使用 IF 使用 VBA 在单元格中添加公式的问题
我正在尝试制作一个宏，将下面的公式添加到单元格中，然后将其拖到整个列中并在 H 列中复制相同的公式我想在 F 和 H 列中输入公式的数据 Range("F1").formula = "=IF(ISE
使用 OperatorPrecedenceParser 使用 FParsec 解析函数应用程序？
问题类似于this one ，但我想使用 OperatorPrecedenceParser 解析带有函数应用程序的表达式在 FParsec . 这是我的 AST: type Expression =
sql - 使用 sequelize 使用 where 查询编码计数
我想通过使用 sequelize 和 node.js 将这个查询更改为代码取决于在哪里 select COUNT(gender) as genderCount from customers where
bash - 使用 “let”分配Bash失败，使用 “/”
我正在使用GNU bash，版本5.0.3(1)-发行版(x86_64-pc-linux-gnu)，我想知道为什么简单的赋值语句会出现语法错误: #/bin/bash var1=/tmp
javascript - 使用 JavaScript 使用 FOR OF 数组循环时出现错误？
这里，为什么我的代码在 IE 中不起作用。我的代码适用于所有浏览器。没有问题。但是当我在 IE 上运行我的项目时，它发现错误。而且我的 jquery 类和 insertadjacentHTMl 也不
javascript - 使用 javascript 使用 for 属性更改表单标签内容
我正在尝试更改标签的innerHTML。我无权访问该表单，因此无法编辑 HTML。标签具有的唯一标识符是“for”属性。这是输入和标签的结构:
javascript - 使用 jquery 使用 .on() 将事件附加到页面上的动态插入按钮
我有一个页面，我可以在其中返回用户帖子，可以使用一些 jquery 代码对这些帖子进行即时评论，在发布新评论后，我在帖子下插入新评论以及删除按钮。问题是 Delete 按钮在新插入的元素上不起作用，
使用 awk 使用 sha1sum 进行散列
我有一个大约有 20 列的“管道分隔”文件。我只想使用 sha1sum 散列第一列，它是一个数字，如帐号，并按原样返回其余列。使用 awk 或 sed 执行此操作的最佳方法是什么？ Accounti
mysql - 使用 insert into 使用 mysql
我需要将以下内容插入到我的表中...我的用户表有五列 id、用户名、密码、名称、条目。 (我还没有提交任何东西到条目中，我稍后会使用 php 来做)但由于某种原因我不断收到这个错误:#1054 - U
jquery - 将输入字段值修剪为仅字母数字字符/使用 .使用 jQuery
所以我试图有一个输入字段，我可以在其中输入任何字符，但然后将输入的值小写，删除任何非字母数字字符，留下“。”而不是空格。例如，如果我输入: 地球的 70% 是水，-!*#$^^ & 30% 土地输
javascript - 使用 .innerHTML 使用 DOM
我正在尝试做一些我认为非常简单的事情，但出于某种原因我没有得到想要的结果？我是 javascript 的新手，但对 java 有经验，所以我相信我没有使用某种正确的规则。这是一个获取输入值、检查选择
php - 使用 angularjs 使用 where 子句从数据库获取数据
我想使用 angularjs 从 mysql 数据库加载数据。这就是应用程序的工作原理；用户登录，他们的用户名存储在 cookie 中。该用户名显示在主页上我想获取这个值并通过 angularjs
ios - 使用 UITableViewCell 使用 AutoLayout
我正在使用 autoLayout，我想在 UITableViewCell 上放置一个 UIlabel，它应该始终位于单元格的右侧和右侧的中心。这就是我想要实现的目标所以在这里你可以看到我正在谈论的
mysql - 使用 ElasticSearch 使用 or 和运算符搜索多个字段
我需要与 MySql 等效的 elasticsearch 查询。我的 sql 查询: SELECT DISTINCT t.product_id AS id FROM tbl_sup_price t
ios - 使用 Swift 使用 JSON
我正在实现代码以使用 JSON。 func setup() { if let flickrURL = NSURL(string: "https://api.flickr.com/
javascript - 使用 JavaScript 使用 for 循环声明变量
我尝试使用for循环声明变量，然后测试cols和rols是否相同。如果是，它将运行递归函数。但是，我在 javascript 中执行 do 时遇到问题。有人可以帮忙吗？现在，在比较 col.1 和
jquery - 使用 :after 使用 jquery 更改样式
我举了一个我正在处理的问题的简短示例。 HTML代码: 1 2 3 CSS 代码: .BB a:hover{ color: #000; } .BB > li:after {

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

使用 scollTop 的 jQuery 导航