jQuery网站标题问题

时间：2016-04-23 18:38:37

标签： javascript jquery html css html5

我在我的HTML中移动了一些div以稍微消除代码，但我没有备份旧文件并将其直接保存到我的FTP中，覆盖了旧文件。

现在当您向下滚动超过150px时，它会让您转到页面顶部（仅在更大的屏幕上）。我不太确定如何修复或我做错了什么，但任何帮助都会很棒！

HTML（没有缩小尺寸的主要内容）：

<!DOCTYPE html>
<html>
  <head>

    <title>ItzJavaCraft | ModPE Members</title>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet">
    <link href="/assets/css/stylesheet.css" rel="stylesheet">
    <link rel="stylesheet" href="https://npmcdn.com/tachyons@4.0.0-beta.22/css/tachyons.min.css">

    <link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Actor' rel='stylesheet' type='text/css'>
    <link href="/assets/images/icon.png" rel="icon" type="image/png">

    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  </head>
  <body>
    <header class="header-fixed">
      <div class="header-limiter">
        <h1><a href="http://itzjavacraft.tk">ItzJavaCraft</a></h1>
        <nav>
          <a href="http://itzjavacraft.tk" class="selected">Home</a>
          <a href="http://itzjavacraft.tk/blog">Blog</a>
          <a href="http://itzjavacraft.tk/tutorials">Tutorials</a>
          <a href="http://itzjavacraft.tk/news">News</a>
          <a href="http://itzjavacraft.tk/contact">Contact</a>
          <a href="http://itzjavacraft.tk/about">About</a>
        </nav>
      </div>
    </header>
    <div class="header-fixed-placeholder">
    </div>
    <div class="wrap">
      <div class="main">
      </div>
    </div>
    <footer class="footer-distributed">
      <div class="footer-left">
        <h3>ItzJavaCraft</h3>
        <p class="footer-links">
          <a href="#">Home</a>
            »
          <a href="#">Blog</a>
            »
          <a href="#">Pricing</a>
            »
          <a href="#">About</a>
            »
          <a href="#">Faq</a>
            »
          <a href="#">Contact</a>
        </p>
        <p class="footer-company-name">Copyright © 2016 <b>ItzJavaCraft</b>, All Rights Reserved</p>
      </div>
      <div class="footer-center">
        <div>
          <i class="fa fa-envelope"></i>
          <p><a href="mailto:itzjavacraft@gmail.com">itzjavacraft@gmail.com</a></p>
        </div>
      </div>
      <div class="footer-right">
        <p class="footer-company-about"><span>Oh, hello there...</span>My name is Java. No, not the programming language! Well, this is awkward. Not much else to be said... uhm... enjoy your stay, I guess!</p>
        <div class="footer-icons">
          <a href="#"><i class="fa fa-facebook"></i></a>
          <a href="http://twitter.com/itzjavacraft"><i class="fa fa-twitter"></i></a>
          <a href="http://instagram.com/itzjavacraft"><i class="fa fa-instagram"></i></a>
        <a href="https://plus.google.com/u/3/100627374146825887109" target="_blank"><i class="fa fa-google-plus"></i></a>
        </div>
      </div>
    </footer>
    <div class="menu">
      <script>
        $(document).ready(function(){
          var showHeaderAt = 150;
          var win = $(window),
              body = $("body");
          if(win.width() > 600){
            win.on("scroll", function(e){
              if(win.scrollTop() > showHeaderAt) {
                body.addClass("fixed");
              }
              else {
                body.removeClass("fixed");
              }
            });
          }
        });
      </script>
    </div>
  </body>
</html>


jQuery的：

$(document).ready(function(){
  var showHeaderAt = 150;
  var win = $(window),
      body = $("body");
  if(win.width() > 600){
    win.on("scroll", function(e){
      if(win.scrollTop() > showHeaderAt) {
        body.addClass("fixed");
      }
      else {
        body.removeClass("fixed");
      }
    });
  }
});

注意：在我移动div之前它工作得很好。

可以找到网站的实时版本here，可以找到一个JSFiddle，小提琴here。

1 个答案:

答案 0 :(得分：2)

看起来它与“固定”的类名有关。你有没有介绍任何新的样式表？我尝试更改规则并将/ removeClass添加到“fixed1”，它现在可以正常工作。

$(document).ready(function() {

  var showHeaderAt = 150;
  var win = $(window),
    body = $("body");

  if (win.width() > 600) {
    win.scrollTop();
    var test = 0;
    console.log("Greater than 600. win.scrollTop: ", test);

    win.on("scroll", function(e) {
      var st = $(window).scrollTop();
      console.log("ST: ", st);

      if (st > showHeaderAt) {
        body.addClass("fixed1");
      } else {
        body.removeClass("fixed1");
      }
    });
  }
});
/* Toolkit */

hr {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
img.center-align {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.text-align-center {
  text-align: center;
}
.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE/Edge */
  user-select: none;
  /* non-prefixed version, currently not supported by any browser */
}
.word-wrap {
  word-wrap: break-word;
  /* IE 5.5-7 */
  white-space: -moz-pre-wrap;
  /* Firefox 1.0-2.0 */
  white-space: pre-wrap;
  /* current browsers */
}
/* Links */

a:link {
  color: black;
  background-color: transparent;
  text-decoration: none;
  font-size: 75%;
}
a:visited {
  color: black;
  background-color: transparent;
  text-decoration: none;
  font-size: 75%;
}
a:hover {
  color: #9700bd;
  background-color: transparent;
  text-decoration: underline;
  font-size: 75%;
}
a:active {
  color: #9700bd;
  background-color: transparent;
  text-decoration: none;
  font-size: 75%;
}
/* Header */

.header-fixed {
  background-color: #292c2f;
  box-shadow: 0 1px 1px #ccc;
  padding: 20px 40px;
  height: 80px;
  color: #ffffff;
  box-sizing: border-box;
  top: -100px;
  -webkit-transition: top 0.3s;
  transition: top 0.3s;
}
.header-fixed .header-limiter {
  max-width: 1200px;
  text-align: center;
  margin: 0 auto;
}
.header-fixed-placeholder {
  height: 80px;
  display: none;
}
.header-fixed .header-limiter h1 {
  float: left;
  font: normal 28px Cookie, Arial, Helvetica, sans-serif;
  line-height: 40px;
  margin: 0;
}
.header-fixed .header-limiter h1 span {
  color: #5383d3;
}
.header-fixed .header-limiter a {
  color: #ffffff;
  text-decoration: none;
}
.header-fixed .header-limiter nav {
  font: 16px Arial, Helvetica, sans-serif;
  line-height: 40px;
  float: right;
}
.header-fixed .header-limiter nav a {
  display: inline-block;
  padding: 0 5px;
  text-decoration: none;
  color: #ffffff;
  opacity: 0.9;
}
.header-fixed .header-limiter nav a:hover {
  opacity: 1;
}
.header-fixed .header-limiter nav a.selected {
  color: #608bd2;
  pointer-events: none;
  opacity: 1;
}
body.fixed1 .header-fixed {
  padding: 10px 40px;
  height: 50px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
body.fixed1 .header-fixed-placeholder {
  display: block;
}
body.fixed1 .header-fixed .header-limiter h1 {
  font-size: 24px;
  line-height: 30px;
}
body.fixed1 .header-fixed .header-limiter nav {
  line-height: 28px;
  font-size: 13px;
}
@media all and (max-width: 600px) {
  .header-fixed {
    padding: 20px 0;
    height: 75px;
  }
  .header-fixed .header-limiter h1 {
    float: none;
    margin: -8px 0 10px;
    text-align: center;
    font-size: 24px;
    line-height: 1;
  }
  .header-fixed .header-limiter nav {
    line-height: 1;
    float: none;
  }
  .header-fixed .header-limiter nav a {
    font-size: 13px;
  }
  body.fixed1 .header-fixed {
    display: none;
  }
}
/* ModPE API CSS */

.name {
  background-color: #F5FFE8;
  color: #00209D;
}
table.modpe {
  border: 0;
  width: 75%;
  font-family: monospace;
}
th.modpe {
  text-align: left;
  width: 16.66666667%;
}
td.modpe {
  width: 16.66666667%;
}
div.code-box {
  border-left: 5px solid #8026C0;
  padding: 10px;
  background: #FFFFFF;
}
div.code-box-border {
  border: 2px solid #E8E8E8;
  background: #E8E8E8;
  border-radius: 5px;
  box-shadow: 3px 3px 1px #ABABAB;
  padding: 0px 15px 15px 15px;
}
td.name {
  color: #00DAFF;
}
h4.code-example-heading {
  padding-top: 5px;
}
pre.no-border {
  border: none !important;
}
hr.modpe {
  margin-top: 15px;
}
/* Footer */

.footer-distributed {
  background-color: #292c2f;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  width: 100%;
  text-align: left;
  font: bold 16px sans-serif;
  padding: 55px 50px;
  margin-top: 80px;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right {
  display: inline-block;
  vertical-align: top;
}
.footer-distributed .footer-left {
  width: 40%;
}
.footer-distributed h3 {
  color: #ffffff;
  font: normal 36px'Cookie', cursive;
  margin: 0;
}
.footer-distributed h3 span {
  color: #5383d3;
}
.footer-distributed .footer-links {
  color: #ffffff;
  margin: 20px 0 12px;
  padding: 0;
}
.footer-distributed .footer-links a {
  display: inline-block;
  line-height: 1.8;
  text-decoration: none;
  color: inherit;
}
.footer-distributed .footer-company-name {
  color: #8f9296;
  font-size: 14px;
  font-weight: normal;
  margin: 0;
}
.footer-distributed .footer-center {
  width: 35%;
}
.footer-distributed .footer-center i {
  background-color: #33383b;
  color: #ffffff;
  font-size: 25px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  text-align: center;
  line-height: 42px;
  margin: 10px 15px;
  vertical-align: middle;
}
.footer-distributed .footer-center i.fa-envelope {
  font-size: 17px;
  line-height: 38px;
}
.footer-distributed .footer-center p {
  display: inline-block;
  color: #ffffff;
  vertical-align: middle;
  margin: 0;
}
.footer-distributed .footer-center p span {
  display: block;
  font-weight: normal;
  font-size: 14px;
  line-height: 2;
}
.footer-distributed .footer-center p a {
  color: #5383d3;
  text-decoration: none;
  ;
}
.footer-distributed .footer-right {
  width: 20%;
}
.footer-distributed .footer-company-about {
  line-height: 20px;
  color: #92999f;
  font-size: 13px;
  font-weight: normal;
  margin: 0;
}
.footer-distributed .footer-company-about span {
  display: block;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
}
.footer-distributed .footer-icons {
  margin-top: 25px;
}
.footer-distributed .footer-icons a {
  display: inline-block;
  width: 35px;
  height: 35px;
  cursor: pointer;
  background-color: #33383b;
  border-radius: 2px;
  font-size: 20px;
  color: #ffffff;
  text-align: center;
  line-height: 35px;
  margin-right: 3px;
  margin-bottom: 5px;
}
@media (max-width: 880px) {
  .footer-distributed {
    font: bold 14px sans-serif;
  }
  .footer-distributed .footer-left,
  .footer-distributed .footer-center,
  .footer-distributed .footer-right {
    display: block;
    width: 100%;
    margin-bottom: 40px;
    text-align: center;
  }
  .footer-distributed .footer-center i {
    margin-left: 0;
  }
}
/* Other */

body {
  margin: 0px;
}
div.main {} div.wrap {
  margin-left: 10%;
  margin-right: 10%;
}
#comments {
  margin-left: auto;
  margin-right: auto;
}
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet">
  <link href="/assets/css/stylesheet.css" rel="stylesheet">
  <link rel="stylesheet" href="https://npmcdn.com/tachyons@4.0.0-beta.22/css/tachyons.min.css">

  <link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
  <link href='https://fonts.googleapis.com/css?family=Actor' rel='stylesheet' type='text/css'>
  <link href="/assets/images/icon.png" rel="icon" type="image/png">

  <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <header class="header-fixed">
      <div class="header-limiter">
        <h1><a href="http://itzjavacraft.tk">ItzJavaCraft</a></h1>
        <nav>
          <a href="http://itzjavacraft.tk" class="selected">Home</a>
        </nav>
      </div>
    </header>
<div class="header-fixed-placeholder"></div>
<div class="wrap">
  <div style="height:1000px;" class="main">
MAIN
  </div>
</div>
<footer class="footer-distributed">
  <div class="footer-left">
    <h3>ItzJavaCraft</h3>
    <p class="footer-links">
      <a href="#">Home</a>
        »
      <a href="#">Blog</a>
        »
      <a href="#">Pricing</a>
        »
      <a href="#">About</a>
        »
      <a href="#">Faq</a>
        »
      <a href="#">Contact</a>
    </p>
    <p class="footer-company-name">Copyright © 2016 <b>ItzJavaCraft</b>, All Rights Reserved</p>
  </div>
  <div class="footer-center">
    <div>
      <i class="fa fa-envelope"></i>
      <p><a href="mailto:itzjavacraft@gmail.com">itzjavacraft@gmail.com</a></p>
    </div>
  </div>
  <div class="footer-right">
    <p class="footer-company-about"><span>Oh, hello there...</span>My name is Java. No, not the programming language! Well, this is awkward. Not much else to be said... uhm... enjoy your stay, I guess!</p>
    <div class="footer-icons">
      <a href="#"><i class="fa fa-facebook"></i></a>
      <a href="http://twitter.com/itzjavacraft"><i class="fa fa-twitter"></i></a>
      <a href="http://instagram.com/itzjavacraft"><i class="fa fa-instagram"></i></a>
    <a href="https://plus.google.com/u/3/100627374146825887109" target="_blank"><i class="fa fa-google-plus"></i></a>
    </div>
  </div>
</footer>
    <div class="menu"></div>

相关问题
最新问题