2016-04-23 112 views
0

我在我的HTML中移動了一些div來稍微修改代碼,但我沒有備份舊文件並將其直接保存到我的FTP中,覆蓋舊文件。jQuery網站標題問題

現在,當您向下滾動超過150像素時,它會讓您轉到頁面頂部(僅適用於較大的屏幕)。我不太清楚如何解決或我做錯了什麼,但任何幫助都會很棒!

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/[email protected]/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:[email protected]">[email protected]</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

@MikelisBaltruks是的。誠實地說, – ItzJavaCraft

+0

- 該鏈接打開完全白頁。 –

回答

2

看起來它與類名「fixed」有關。你有沒有介紹任何新的樣式表?我試着改變規則並添加/刪除類到「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/[email protected]/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:[email protected]">[email protected]</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>

+0

是的,我添加了[Tachyons](http://tachyons.io)樣式表。我沒有考慮檢查CSS,而對jQuery知之甚少,所以我很難挑出問題。 – ItzJavaCraft

+1

檢查CSS後,事實證明這是Tachyons樣式表搞亂頁面。謝謝您的幫助! :) – ItzJavaCraft

+0

非常歡迎!那些可能是棘手的調試。 –