jQuery Website Header Problems

Question

I moved around some divs in my HTML to neaten up the code a little, but I didn't back up the old file and saved it directly into my FTP, overwriting the old file.

Now when you scroll down past 150px it makes you go to the top of the page (Only on bigger screens). I'm not quite sure how to fix or what I've done wrong, but any help would be great!

HTML (Without main content to cut down size):



  

    ItzJavaCraft | ModPE Members

    
    
    

    
    
    

    
    
    

    
    

  
  
    
      
        ItzJavaCraft
        
          Home
          Blog
          Tutorials
          News
          Contact
          About
        
      
    
    
    
    
      
      
    
    
      
        ItzJavaCraft
        
          Home
            »
          Blog
            »
          Pricing
            »
          About
            »
          Faq
            »
          Contact
        
        Copyright © 2016 ItzJavaCraft, All Rights Reserved
      
      
        
          
          itzjavacraft@gmail.com
        
      
      
        Oh, hello there...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!

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");
      }
    });
  }
});

Note: It was working just fine before I moved around the divs.

A live version of the site can be found here and a JSFiddle, fiddle can be found here.

Dan Weber · Accepted Answer

It looks like it has to do with the class name of "fixed". Did you introduce any new stylesheets? I tried changing the rules and add/removeClass to "fixed1" and it now works.

$(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;
}

  
  
  

  
  
  

  
  
    
      
        ItzJavaCraft
        
          Home
        
      
    


  
MAIN
  


  
    ItzJavaCraft
    
      Home
        »
      Blog
        »
      Pricing
        »
      About
        »
      Faq
        »
      Contact
    
    Copyright © 2016 ItzJavaCraft, All Rights Reserved
  
  
    
      
      itzjavacraft@gmail.com
    
  
  
    Oh, hello there...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!

jQuery Website Header Problems

Answers (1)

Related Questions