Reputation: 310

Fixed header still disappears when webpage is scrolled

Hi everyone I am having trouble getting to stay in place while I scroll, essentially making it 'fixed'. I have set the CSS to fixed, as you can see below, but the header still disappears when I scroll.

HTML PAGE

 <title>Final Test</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <script>
    window.open    = function(){};
    window.print   = function(){};
    // Support hover state for mobile.
    if (false) {
      window.ontouchstart = function(){};
    }
  </script>


<body>


**<div class="fixed">   
  <h1>Packit<br>

    <style>
  .col-group {
  overflow: hidden;
}
.col-group > div {
  padding: 1em;
}

@media screen and (min-width: 44em) {
  .col-group > div {
    float: left;
    width: 50%;
  }
  .col-group > div:nth-child(odd) {
    clear: left;
  }
}

@media screen and (min-width: 50em) {
  .col-group > div {
    float: left;
    width: 33.3333333%;
  }
  .col-group > div:nth-child(3n+1) {
    clear: left;
  }
  .col-group > div:nth-child(odd) {
    clear: none;
  }
}

@media screen and (min-width: 70em) {
  .col-group > div {
    width: 20%;
  }
  .col-group > div:nth-child(odd), .col-group > div:nth-child(3n+1) {
    clear: none;
  }
}body h1 {
    font-size: 12em;
}
  body h1 {
    font-size: 3em;
}
  body h1 {
    font-size: 16em;
}
  body h1 {
    font-size: 16px;
}
  body h1 {
    font-size: 12px;
}
  </style>

  <link href="../Documents/Unnamed Site 2/stylesheet2.css" rel="stylesheet" type="text/css">

Hi there. We are here to help.</h1> 
</div>**

CSS PAGE

/*
colors
red: #e51837; rgb(229,24,55)
gray: #808080;
*/

/************Reset**************/
* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}
html, body, div, object, iframe, fieldset { 
    margin: 0; 
    padding: 0; 
    border: 0;
} 

input, select
{
    width: 120px;
}

ol, ul { 
    list-style: none;
    margin: 0;
    padding: 0;
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
}
header, footer, nav, section, article, hgroup, figure {
    display: block; 
}
legend {
    display: none;
}
/************End Reset**************/

/************Global**************/
.fixed
{   position:fixed;
    top:0;
    left:0;
    width:100%;
    margin:0 auto;
}

.form
{   position:fixed;
    margin: auto;
    width: auto;
    line-height: 1;
}

body {
    background: #fff;
    color: #000;
    font: 100%/1.4 "HelveticaNeue", "Helvetica", "Arial", sans-serif;
    padding: 0;
    -webkit-text-size-adjust: none;
}
a {
    color: #808080;
    text-decoration: none;
}
a:hover, a:focus {
    color: #e51837;
}
p {
    margin: 0 0 1em;
}
img, object, video {
    max-width: 100%;
    border: 0;
}
a img {
    border: 0;
    outline: 0;
}
h1 {

    font-size: 3em;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 0.2em;

}
h2 {
    font-size: 2em;
    line-height: 1.1;
    margin-bottom: 0.2em;
}
h3 {
    font-weight: normal;
    line-height: 1.1;
    padding-bottom: 0.4em;
    border-bottom: 1px solid #ccc;
}
h1 a, h2 a, h3 a {
    display: block;
    color: #000;
}
h1 a:hover, h2 a:hover, h3 a:hover {
    color: #e51837;
}
blockquote {
    border-left: 0.5em solid #ddd;
    padding-left: 1em;
    margin-left: 1em;
}
small {
    color: #e51837;
}
input[type=search] {
    -webkit-appearance: none;
    border-radius: 0;
}
::-webkit-input-placeholder {
    color: #808080;
}
:-moz-placeholder {  
    color: #808080;
}
/************End Global**************/

/************Classes**************/
.inactive {
    color: #ddd;
}
/************End Classes**************/

/************Structure**************/
.container {
    max-width: 70em;
    margin: 0 auto;
    padding: 0 1em;
    overflow: hidden;
}
div[role=main] {
    padding-bottom: 1em;
}

/*Footer*/
footer[role=contentinfo] {
    color: #fff;
    background: #000;
    margin: 0 -1em;
    position: fixed;
    z-index: 2;
}
footer[role=contentinfo] > div {

    max-width: 70em;
    padding: 0 1em;
    margin: 0 auto;
    overflow: hidden;
}
footer[role=contentinfo] p {
    margin: 0;
}
footer[role=contentinfo] .nav li a {
    display: block;
    border-bottom: 1px solid #808080;
    padding: 1em;
    margin: 0 -1em;
}
footer[role=contentinfo] a {
    display: inline-block;
    padding: 0.5em 0;
}
footer[role=contentinfo] a.nav-home {
    color: #fff;
}
footer[role=contentinfo] .f-rga {
    padding: 0.6em 0;
}
footer[role=contentinfo] img {
    max-width: 4.4em;
    display: inline-block;
    margin-bottom: -0.22em;
}
/*End Footer*/

/*Grid*/
.grid {
    margin: 0 -1em;
    overflow: hidden;
}
.grid:target {
    -webkit-animation: fadeout 5s 1 ease-out;
    -moz-animation: fadeout 5s 1 ease-out; 
    -o-animation: fadeout 5s 1 ease-out;
    animation: fadeout 5s 1 ease-out; 
}
.grid > h2 {
    margin-left: 0.45em;
}
.grid > section {
    padding: 1em 1em 0.5em;
}
.grid > section:target {
    -webkit-animation: fadeout 5s 1 ease-out;
    -moz-animation: fadeout 5s 1 ease-out; 
    -o-animation: fadeout 5s 1 ease-out;
    animation: fadeout 5s 1 ease-out; 
}
.grid ul {
    overflow: hidden;
}
.grid ul li {
    margin-bottom: 0.3em;
}
.featured:after {
    content: "*";
    color: #e51837;
}

/*Fluid*/
.fluid {
    display: block;
    margin: 0 auto;
    max-width: 40em;
}

/*Homepage*/
.home h1 {
    margin-bottom: 0.2em;
}
.intro {
    font-size: 1.8em;
    line-height: 1.2;
    margin: 0 auto;
}
.intro a:hover ,.intro a:focus {
    color: #000;
    border-bottom-color: #000;
}

.ani {
    position: relative;
    height: 15em;
    margin: 1em 0 0;
    width: 100%;
    z-index: 0;
}
.ani div {
    width: 100%;
}
.ani div b {
    display: block;
    position: absolute;
    top: 5%;
    right: 5%;
    bottom: 5%;
    left: 5%;
    background: rgba(229,24,55,0.22);
}


/*Patterns*/
.mod {
    padding: 1em;
}
.pattern {
    background: #f7f7f7;
    border-bottom: 1px solid #808080;
    margin-bottom: 1em;
    overflow: hidden;
}
.pattern-description h1 {
    font-size: 3.4em;
    margin-bottom: 0.5em;
}
.pattern-description {
    max-width: 40em;
    margin: 0 auto;
}
.pattern-description ul, .pattern-description ol {
    margin-bottom: 2em;
}
.pattern-description li {
    margin-bottom: 1em;
}


/*Blog*/
/*Blog Header*/
.blog .container {
    max-width: 62em;
}
.blog header[role=banner] {
    overflow: hidden;
    margin-bottom: 2em;
    padding: 2em 0 1em;
    border-bottom: 1px solid #000;
}
.blog-logo {
    font-weight: normal;
    font-size: 1.2em;
    margin: 0 0 1em;
}
.blog-logo img {
    width: 3.3em;
}
.blog-logo a {
    color: #000;
}
.search-form {
    width: 100%;
    margin-bottom: 1em;
}
.search-field {
    width: 100%;
    padding: 0.5em 0;
    border: 0;
    border-bottom: 1px solid #808080;
    outline: none;
}
.search-field:focus {
    background: #e51837;
    color: #fff;
}
.search-field:focus::-webkit-input-placeholder {
   color: #fff;
}

.search-field:focus :-moz-placeholder {  
   color: #fff; 
}

.blog .nav {
    clear: both;
}
.blog .nav a {
    display: block;
    font-weight: bold;
    color: #000;
}
.blog .nav a:hover {
    color: #e51837;
}

/*Posts*/
.posts ol > li {
    padding-bottom: 1em;
    border-bottom: 1px solid #ccc;
    margin-bottom: 1em;
    overflow: hidden;
} 
.posts h2 {
    font-size: 1.4em;
    margin: 0.28em 0 0.1em;
    font-weight: normal;
}
.posts h2 a {
    color: #000;
}
.posts h2 a:hover, .posts h2 a:focus {
    color: #e51837;
}
.permalink {
    display: block;
    font-size: 0.8em;
    margin-bottom: 1.2em;
}
.post-body a {
    border-bottom: 1px solid #ccc;
}
.posts blockquote {
    margin: 0 0 1em;
    color: #666;
    border-left: 0.25em solid #ccc;
    padding-left: 1em;
}
.tags {
    float: left;
}
.tags li {
    display: inline-block;
    font-size: 0.8em;
    margin-right: 0.5em;
}

.posts ol > li .tags a, .permalink {
    color: #ccc;
    -webkit-transition: color 0.3s ease-out;  
     -moz-transition: color 0.3s ease-out;  
      -ms-transition: color 0.3s ease-out;  
       -o-transition: color 0.3s ease-out;  
          transition: color 0.3s ease-out;
}
.posts ol > li:hover .tags a, .posts ol > li:hover .permalink {
    color: #808080;
}
.blog-nav {
    text-align: center;
    overflow: hidden;
    padding: 1em 0;
}
.posts .blog-nav a {
    border: 0;
}
.nav-next {
    float: right;
}
.nav-prev {
    float: left;
}

/* Sidebar */
.sidebar {
    font-size: 0.8em;
    padding-bottom: 1.4em;
}
.sidebar div {
    margin-bottom: 2em;
}
.sidebar h3 {
    font-weight: bold;
    font-size: 0.9em;
    line-height: 1;
    border-bottom: 1px solid #000;
}
.sidebar a {
    color: #808080;
}
.sidebar a:hover, .sidebar a:focus {
    color: #e51837;
}
.social-links {
    overflow: hidden;
}
.social-links li {
    float: left;
    margin-right: 1.2em;
}
.social-links li a {
    display: block;
    height: 17px;
    width: 16px;
    text-indent: -99999em;
    background: url(images/sprite_social.png) no-repeat;
}
.social-links li a.s-fb {
    background-position: -0px -76px;
}
.social-links li a.s-fb:hover {
    background-position: -16px -76px;
}
.social-links li a.s-twitter {
    background-position: -0px -37px;
}
.social-links li a.s-twitter:hover {
    background-position: -16px -37px;
}
.social-links li a.s-linkedin {
    background-position: -0px -113px;
}
.social-links li a.s-linkedin:hover {
    background-position: -16px -113px;
}
.social-links li a.s-rss {
    background-position: -0px -0px;
}
.social-links li a.s-rss:hover {
    background-position: -16px -0px;
}



.top {
    clear: both;
    display: block;
    padding: 1em 0;
}
.top:before {
    content: '▲';
}

/******Media Queries*******/

/* Medium Screens*/
@media all and (min-width: 35em) {
    .blog-logo {
        float: left;
        font-size: 2em;
        margin: 0 0 1em;
    }
    .blog-logo img {
        width: auto;
    }
}
@media all and (min-width:40em) {
    h1 {
        font-size: 5.6em;
    }
    .container {
        padding-bottom: 4em;
    }
    footer[role=contentinfo] {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
    }
    footer[role=contentinfo] .nav {
        float: left;
    }
    footer[role=contentinfo] .nav li {
        display: inline-block;
        margin-right: 0.8em;
    }
    footer[role=contentinfo] .nav li a {
        border: 0;
    }
    footer[role=contentinfo] .f-rga {
        float: right;
    }
    .grid ul li {
        width: 50%;
        float: left;
    }
    .grid ul li:nth-child(odd) {
        padding-right: 1em;
        clear: left;
    }
    .ani {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 4em;
        left: 0;
        width: 100%;
        height: 90%;
        margin: 0;
        z-index: 0;
    }
    .home {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 5em;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 90%;
        display: table;
        text-align: center;
        color: #fff;
        color: rgba(255,255,255,0.7);
    }
    .home > div {
        display: table-cell;
        vertical-align: middle;
    }
    .home .intro a {
        color: #fff;
        color: rgba(255,255,255,0.8);
        border-bottom: 1px solid rgba(255,255,255,0.8);
    }
    .home .intro a:hover, .home .intro a:focus {
        color: #000;
        border-bottom-color: #000;
    }


    /*Blog*/

    .search-form {
        float: right;
        width: 30%;
        max-width: 16em;
        padding-left: 0.8em;
        margin-top: 0.4em;
    }

    .posts {
        float: left;
        width: 64%;
    }
    .sidebar {
        float: right;
        width: 30%;
        max-width: 21em;
        margin: 0 0 1em;
        padding-left: 0.8em;
    }
}


/* Large Screens */
@media all and (min-width: 54em) {
    h1 {
        font-size: 6.4em;
    }
    .grid > section {
        float: left;
        width: 33.3333333%;
    }
    .grid > section:nth-of-type(3n+1) {
        clear: left;
    }
    .grid ul li {
        width: auto;
        float: none;
    }
    .grid ul li:nth-child(odd) {
        padding-right: 0;
    }
}   


/* CSS Animations */
@-webkit-keyframes fadeout {
  0%   { background: #fff; }
  10%   { background: #eee; }
  100% { background: #fff; }
}
@-moz-keyframes fadeout {
  0%   { background: #fff; }
  10%   { background: #eee; }
  100% { background: #fff; }
}
@-o-keyframes fadeout {
  0%   { background: #fff; }
  10%   { background: #eee; }
  100% { background: #fff; }
}
@keyframes fadeout {
  0%   { background: #fff; }
  10%   { background: #eee; }
  100% { background: #fff; }
}

Upvotes: 0

Answers (3)

Neo

Reputation: 11557

I was having the same issue with Chrome, it seems to be a bug that occurs when there is too much going on inside the page, I was able to fix it by adding the following transform code to the fixed position element, (transform: translateZ(0);-webkit-transform: translateZ(0);) that forces the browser to use hardware acceleration to access the device’s graphical processing unit (GPU) to make pixels fly. Web applications, on the other hand, run in the context of the browser, which lets the software do most (if not all) of the rendering, resulting in less horsepower for transitions. But the Web has been catching up, and most browser vendors now provide graphical hardware acceleration by means of particular CSS rules.

Using -webkit-transform: translate3d(0,0,0); will kick the GPU into action for the CSS transitions, making them smoother (higher FPS).

Note: translate3d(0,0,0) does nothing in terms of what you see. it moves the object by 0px in x,y and z axis. It's only a technique to force the hardware acceleration.

.fixed {
    position: fixed;
    background: white;
    border-bottom: 2px solid #eaeaea;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 9994;
    height: 80px;
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

Upvotes: 0

Black Sheep

Reputation: 6694

The problem in your case is the formatting of your HTML-Code, so improve it like this:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="../Documents/Unnamed Site 2/stylesheet2.css" rel="stylesheet" type="text/css">

<script>
window.open    = function(){};
window.print   = function(){};
// Support hover state for mobile.
if (false) {
  window.ontouchstart = function(){};
}
</script>
<style>
   .col-group {
       overflow: hidden;
   }
   .col-group > div {
       padding: 1em;
   }
    // ... AND SO ON... // 

</style>
<title>JS Bin</title>
</head>

<body>
   <div class="fixed">   
       <h1>Packit</h1><br> // YOU DON'T CLOSED HERE THE H1 TAG
   </div>
</body>
</html>

And why don`t you put your css style in an extern file instead of embedded style sheet?

Upvotes: 2

Brad Andrews

Reputation: 98

The reason you're having this problem is because you're HTML code is incorrectly formatted. You have the CSS stylesheet "Stylesheet2.css" in the body section and unfortunately external style sheets need to be linked to in the head or else they don't work. The same cannot be said for however it is common practice to also put in the section of the page too.

Upvotes: 1

Fixed header still disappears when webpage is scrolled

Answers (3)

Related Questions