Make Header Sticky Using CSS with PHP and HTML-CodePudding

My header comes from the function.php file which in return does a echo <<<EOT for the page layout.

The section looks like this:

echo <<<EOT
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
</head>
<body>
<header>

There are, obviously, <link> tags for CSS and JS - but to keep this short, that is how it looks. Then, in the CSS, I have tried many different things to make the header sticky.

As of right now, the CSS for the header looks like this:

header {
position: relative;
border-bottom: 2px solid #fff;
}

I have tried changing that into this (without success):

position: fixed;
top: 0;
width: 100%;
background-color: #333;

Any ideas on how to make the header sticky without affecting the rest of the page layout? And just to be clear, I have deleted the cache and what not, but nothing seem to work.

I have even tried to give the header a class / ID and style it that way, but that too does nothing.

CodePudding user response：

Use position: sticky to make an element ... sticky:

header {
  position: sticky;
  border-bottom: 2px solid #fff;
  top: 0;
  width: 100%;
  background-color: #333;
}

CodePudding user response：

header{
position: sticky;
top: 0;
}

CodePudding user response：

<div >Home | About | Contact</div>
<div >
    <p>Scrollable content with sticky header:</p>
    <p>This example is for showing sticky header on page scroll.</p>
    <p>CSS styles are used to control sticky header on scrolling.</p>
    <p>It can be done by using some client'-side scripting languages.</p>
    <p>For example, we can use jQuery library for obtaining ticky header.</p>
</div>
<style>
    .sticky-header {
        background-color: #000;
        color: #fff;
        width:100%;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        padding: 10px;
        text-align:left;
        letter-spacing: 3px;
    }
    .content-scroll{
        height:1000px;
        padding:100px 0px 0px 50px;
    }
    .content-scroll p{
        height:50px;
    }
    </style>