This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 years ago.
Hi im following the tutorial on w3 schools on modals
http://www.w3schools.com/howto/howto_css_modals.asp
but i cant seem to get mine to open at all. is there anything in my code that is going wrong or am i missing something.
or is there any different ways that you would recommend i do this?
<?php
session_start();
include 'loginlogoutregister.php';
//connecting to database
$link = mysqli_connect("localhost","root","","authentication");
if(isset($_POST['Login_Btn'])){
login($link);
}
if(isset($_POST['Register_Btn'])){
register($link);
}
if(isset($_POST['Logout_Btn'])){
logout($link);
}
?>
<html>
<head>
<Title>LogIn</Title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var modal = document.getElementById('PopUpLR');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("closeLR")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</head>
<body>
<div class = "headerContainer">
<div class = "headerLeft">
test
</div>
<div class="headerMiddle">
<h1>Website</h1>
<div><h4>
<?php
if(isset($_SESSION['username']) ){
echo "Welcome ".$_SESSION['username'];
}else{
echo "Logged Out ";
}
?>
</h4></div>
</div>
<div class = "headerRight">
<div class = "loginRegister">
<p>Login/Register</p>
</div>
</div>
</div>
<button id="myBtn">Open Modal</button>
<div id = "PopUpLR">
<div class = "PopUpLRContent">
<span class="closeLR">x</span>
<p>Some text in the Modal..</p>
</div>
</div>
</body>
</html>
#PopUpLR{
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.PopUpLRContent{
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
.closeLR {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.closeLR:hover,
.closeLR:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
moving the script to the bottom of the body tag solved this issue
Move your script <script>
var modal = document.getElementById('PopUpLR');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("closeLR")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
under your HTML so the button knows what its sending to!
Related
How can i make when I click on the card it opens a "modal window" with information about the product.
<div class="card">
<div class="imgBox">
<img src="./img/bau.png" alt="Produto" class="mouse">
</div>
<div class="contentBox">
<h3>Plugin</h3>
<h2 class="price">25.<small>00</small> BRL</h2>
Comprar Agora!
</div>
</div>
There are several approaches. And there is no real right or wrong here either.
The approach has to fit your application. If you always try to keep the approach somewhat abstract, there is nothing fundamentally wrong with it.
In the example below, I have taken the linked modal example from the comment
below your question and adapted the following.
added a data object in which I manage the corresponding contents of the modal.Here you can also use an API call against an interface.
I have assigned an EventListener to all buttons.
The parts that are variable in the modal are exchanged with the corresponding content when clicked.
Done!
const modalData = [
{id: 1, title: "Title One", content: "bla"},
{id: 2, title: "Title Two", content: "bla blu"},
];
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btns = document.querySelectorAll(".myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btns.forEach(b => {
b.addEventListener('click', (e) => {
modal.style.display = "block";
const dataId = e.target.getAttribute("data-id")
const data = modalData.filter(m => m.id == dataId);
const modalTitle = document.querySelector("#myModal .title");
const modalContent = document.querySelector("#myModal .content");
modalTitle.innerHTML = data[0].title;
modalContent.innerHTML = data[0].content;
})
});
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Animated Modal with Header and Footer</h2>
<!-- Trigger/Open The Modal -->
<button class="myBtn" data-id="1">Open Modal 1</button>
<button class="myBtn" data-id="2">Open Modal 2</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2 class="title">Modal Header</h2>
</div>
<div class="modal-body content">
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
</body>
In the very initial state, I need to click on Read More button TWICE to have the content below show. Weird - how do i fix this problem? I only want to click on Read More button once to show the content underneath it.
function myFunction() {
var x = document.getElementById("myDIV");
var btnText = document.getElementById("myBtn");
if (x.style.display === "none") {
x.style.display = "block";
btnText.innerHTML = "Read less";
} else {
x.style.display = "none";
btnText.innerHTML = "Read More";
}
}
#myDIV {
display: none;
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<div id="myDIV">
This is my DIV element.
</div>
<button onclick="myFunction()" id="myBtn">Read More</button>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
You should include a check if myDiv's display style is empty.
function myFunction() {
var x = document.getElementById("myDIV");
var btnText = document.getElementById("myBtn");
if (x.style.display === "none" || x.style.display === "") { // notice this line
x.style.display = "block";
btnText.innerHTML = "Read less";
} else {
x.style.display = "none";
btnText.innerHTML = "Read More";
}
}
#myDIV {
display: none;
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
<p>
Click the "Try it" button to toggle between hiding and showing the DIV element:
</p>
<div id="myDIV">
This is my DIV element.
</div>
<button onclick="myFunction()" id="myBtn">Read More</button>
<p>
<b>Note:</b> The element will not take up any space when the display property set to "none".
</p>
The reason it's working on two clicks is that the DOM is ready but the script does not knows that the div's style is display: none.
There are two ways you can fix this:
Using window.getComputedStyle()
The Window.getComputedStyle() method returns an object containing the values of all CSS properties of an element, after applying active stylesheets and resolving any basic computation those values may contain.
This way it will ensure that content will show in one click.
Demo:
function myFunction() {
var x = document.getElementById("myDIV");
var displayDiv = window.getComputedStyle(x).display; //this function
var btnText = document.getElementById("myBtn");
if (displayDiv === "none") {
x.style.display = "block";
btnText.innerHTML = "Read less";
} else {
x.style.display = "none";
btnText.innerHTML = "Read More";
}
}
#myDIV {
display: none;
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<div id="myDIV">
This is my DIV element.
</div>
<button onclick="myFunction()" id="myBtn">Read More</button>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
</body>
</html>
Using Inline styling on the div
You could simply set the display to inline style as display:none.
This way it will ensure that content will show in one click.
Demo:
function myFunction() {
var x = document.getElementById("myDIV");
var btnText = document.getElementById("myBtn");
if (x.style.display === "none") {
x.style.display = "block";
btnText.innerHTML = "Read less";
} else {
x.style.display = "none";
btnText.innerHTML = "Read More";
}
}
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<div id="myDIV" style="display: none;">
This is my DIV element.
</div>
<button onclick="myFunction()" id="myBtn">Read More</button>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
</body>
</html>
I created 2 buttons on HTML, and by pressing a button, it will open a modal screen. This eaxmple is with 2 buttons, but my aim is that a page could have multiple buttons.
When pressing the X it closes the modal screen.
But, if you press outside the modal area, it should close it as well.
This does not work for both buttons.
Any help would be appreciated, or if you know of a easier/better way to work with modal screens. :-)
{
<!DOCTYPE html>
<html>
<head>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn0">Open Modal 0</button>
<!-- The Modal -->
<div id="myModal0" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal 0..</p>
</div>
</div>
<button id="myBtn1">Open Modal 1</button>
<!-- The Modal -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal 1..</p>
</div>
</div>
<script>
// Get the modal
var modal0 = document.getElementById('myModal0');
var modal1 = document.getElementById('myModal1');
// Get the button that opens the modal
var btn0 = document.getElementById("myBtn0");
var btn1 = document.getElementById("myBtn1");
// Get the <span> element that closes the modal
var span0 = document.getElementsByClassName("close")[0];
var span1 = document.getElementsByClassName("close")[1];
// When the user clicks the button, open the modal
btn0.onclick = function() {
modal0.style.display = "block";
}
// When the user clicks the button, open the modal
btn1.onclick = function() {
modal1.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span0.onclick = function() {
modal0.style.display = "none";
}
span1.onclick = function() {
modal1.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal0) {
modal0.style.display = "none";
}
}
window.onclick = function(event) {
if (event.target == modal1) {
modal1.style.display = "none";
}
}
</script>
</body>
</html>
}
You have two window.onclick = function(event) Second one overrides first one.
So you really should have only one window.onclick handler:
<!DOCTYPE html>
<html>
<head>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn0">Open Modal 0</button>
<!-- The Modal -->
<div id="myModal0" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal 0..</p>
</div>
</div>
<button id="myBtn1">Open Modal 1</button>
<!-- The Modal -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal 1..</p>
</div>
</div>
<script>
// Get the modal
var modal0 = document.getElementById('myModal0');
var modal1 = document.getElementById('myModal1');
// Get the button that opens the modal
var btn0 = document.getElementById("myBtn0");
var btn1 = document.getElementById("myBtn1");
// Get the <span> element that closes the modal
var span0 = document.getElementsByClassName("close")[0];
var span1 = document.getElementsByClassName("close")[1];
// When the user clicks the button, open the modal
btn0.onclick = function() {
modal0.style.display = "block";
}
// When the user clicks the button, open the modal
btn1.onclick = function() {
modal1.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span0.onclick = function() {
modal0.style.display = "none";
}
span1.onclick = function() {
modal1.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal0) {
modal0.style.display = "none";
}
else if (event.target == modal1) {
modal1.style.display = "none";
}
}
</script>
</body>
</html>
Looking for a good JavaScript to help me hide/show multiple divs with a button click not an a href click so I can use it in blogger.
I've been looking for an answer for a while now and have been unable to find a good one that uses JavaScript and/or CSS. I am a bit of a novice so bear with me.
Following is my code that works but I would like to simplify it and make it work so that it will close the div when I click the appropriate button again.
css
<head>
<style>
#myDIV1 {
width: 150px;
height: 150px;
background-color: lightblue;
display: none;
}
#myDIV2 {
width: 150px;
height: 150px;
background-color: lightblue;
display: none;
}
#myDIV3 {
width: 150px;
height: 150px;
background-color: lightblue;
display: none;
}
#myDIV4 {
width: 150px;
height: 150px;
background-color: lightblue;
display: none;
}
</style>
</head>
I know there is an easier way but this is the only way that I can find that works for what I want it to do for the most part
html
<body>
<p>Click button to see div.</p>
<button onclick="myFunction1()">One</button>
<button onclick="myFunction2()">Two</button>
<button onclick="myFunction3()">Three</button>
<button onclick="myFunction4()">Four</button>
<div id="myDIV1">
This is the div1 element.
</div>
<div id="myDIV2">
This is the div2 element.
</div>
<div id="myDIV3">
This is the div3 element.
</div>
<div id="myDIV4">
This is the div4 element.
</div>
Javascript
<script>
function myFunction1() {
document.getElementById("myDIV1").style.display = "block";
document.getElementById("myDIV2").style.display = "none";
document.getElementById("myDIV3").style.display = "none";
document.getElementById("myDIV4").style.display = "none";
}
function myFunction2() {
document.getElementById("myDIV1").style.display = "none";
document.getElementById("myDIV2").style.display = "block";
document.getElementById("myDIV3").style.display = "none";
document.getElementById("myDIV4").style.display = "none";
}
function myFunction3() {
document.getElementById("myDIV1").style.display = "none";
document.getElementById("myDIV2").style.display = "none";
document.getElementById("myDIV3").style.display = "block";
document.getElementById("myDIV4").style.display = "none";
}
function myFunction4() {
document.getElementById("myDIV1").style.display = "none";
document.getElementById("myDIV2").style.display = "none";
document.getElementById("myDIV3").style.display = "none";
document.getElementById("myDIV4").style.display = "block";
}
</script>
Any help would be appreciated thanks in advance.
I would suggest to separate your code first - it would be then more clean and reusable - like myStyle.css, myScript.js, index.html
Add the css and js file in the html file like -
<link rel="stylesheet" type="text/css" href="myStyle.css">
<script type="text/javascript" src="myScript.js"></script>
src -> indicates the source path of the file. Here I assume that all our css, js, 'html' file in same place.
var divs = ["Div1", "Div2", "Div3", "Div4"];
var visibleDivId = null;
function divVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
}
.buttons a {
font-size: 16px;
}
.buttons a:hover {
cursor:pointer;
font-size: 16px;
}
<div class="main_div">
<div class="buttons">
Div1 |
Div2 |
Div3 |
Div4
</div>
<div class="inner_div">
<div id="Div1">I'm Div One</div>
<div id="Div2" style="display: none;">I'm Div Two</div>
<div id="Div3" style="display: none;">I'm Div Three</div>
<div id="Div4" style="display: none;">I'm Div Four</div>
</div>
</div>
if you want to hide/show all divs simultaneously than you have to give all divs same class for ex: .toggle and than you can do this:
function myFunction1(){
$(".toggle").slideToggle();
}
if you want to hide/show one div at a time than you can do this with id :
function myFunction1(){
$("#myDIV1").slideToggle();
}
with different buttons :
function myFunction1(id){
$("#"+id).slideToggle();
}
pass id here :
<button onclick="myFunction1('myDIV1')">One</button>
<button onclick="myFunction1('myDIV2')">Two</button>
<button onclick="myFunction1('myDIV3')">Three</button>
<button onclick="myFunction1('myDIV4')">Four</button>
I found the answer to what I wanted with the .toggle function thanks for the help. The answer I found here: radomsnippets.com
We can easily add an unlimited amount of buttons using reusable code.
here is a full example! Enjoy
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.generalclass {
width: 100%;
color: #ffffff;
text-align: center;
background-color: #000000;
margin: 10px;
padding: 10px;
display: none;
}
.button{
background: red;
padding: 10px;
border-radius: 5px;
color: #FFFFFF;
font-size: 16px;
border: none;
}
.button:hover{
background: black;
}
</style>
</head>
<body>
<button class="button" onclick="myFunction('button1')">Button 1</button>
<button class="button" onclick="myFunction('button2')">Button 2</button>
<div id="button1" class="generalclass">
<p>I can show anything here</p>
</div>
<div id="button2" class="generalclass">
<p>I can show anything here too and different from button 1</p>
</div>
<script>
function myFunction(divid) {
var x = document.getElementById(divid);
if (x.style.display == "none")
{
x.style.display = "block";
}
else {
x.style.display = "none";
}
}
</script>
</body>
</html>
I'm new and learning to code a website!
I'm trying to do this hover header that when the user scroll down, it will remain on the screen and when the user reaches Sub-Header 1, it will hover it too and changes if the user reaches Sub-Header 2(Sub-Header 1 will then disappear)
This is what I'm working on http://goo.gl/KqAM2R
Thanks in advance!
http://i.imgur.com/flT3oJ1.jpg
You need to use JavaScript to achieve this effect. SSCCE:
NewFile.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="NewFile.js"></script>
<link rel="stylesheet" type="text/css" href="NewFile.css"></head>
<body>
<header class="fixed-top">Europe</header>
<div class="much-text">doge</div>
<header class="whatever1 doge">Heatwave</header>
<div class="much-text">doge</div>
<header class="whatever2 doge">2k15</header>
<div class="much-text">doge</div>
</body>
</html>
NewFile.js:
function isElementInViewport (el, topOrBottom) {
//special bonus for those using jQuery
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
var rect = el.getBoundingClientRect();
if(topOrBottom == "top"){
return rect.top >= 0;
}else{
return rect.bottom <= $(window).height();
}
}
function onVisibilityChange () {
var headers = document.getElementsByClassName("doge");
var headerAbove = null;
for(i = 0; i<headers.length; i++){
$( headers[i]).css("position","");
$( headers[i]).css("top","");
if(!isElementInViewport(headers[i], "top")){
headerAbove = headers[i];
}
}
if(headerAbove != null){
$( headerAbove).css("position","fixed");
$( headerAbove).css("top","30px");
}
}
$(window).on('DOMContentLoaded load resize scroll', onVisibilityChange);
And NewFile.css
#CHARSET "UTF-8";
.fixed-top{
width:100%;
position:fixed;
top:0px;
background-color: red;
}
.whatever1{
width:100%;
background-color: green;
}
.whatever2{
width:100%;
background-color: blue;
}
.much-text{
height: 2000px;
}
.doge {
}
Thanks to authors of answers in How to tell if a DOM element is visible in the current viewport? for an inspiration. Also, I am aware that this code doesn't meet all good practices writing in js & css but OP clearly can find the idea from this one. Notice that you may need to sort headers (from the top header to the bottom header) in your own way before iterating on them in function onVisibilityChange
Try this...
HTML
<div id="page" class="page">
<div class="container">
<div class="contentheadercontainer">
<div class="fsh"><div class="firstheader">Sub header 1</div></div>
<div class="fsh"><div class="secondheader" id='secondheader'><p style='margin-left: 15px;'>Sub header 2</p></div></div>
</div>
</div>
</div>
</div>
CSS
body{
padding: 0px; margin: 0px;
}
.container{
height: 1000px;
}
.fsh{
position: absolute; width: 100%;
}
.firstheader{
height: 30px;width: 100%; position:fixed; background: #B14345; padding: 15px; color: #fff;
}
.secondheader{
border-top: 1px solid #bbb; padding: 5px 0px 5px 0px; margin-top: 300px; width: 100%; background: #B14345;color: #fff;
}
Javascript
document.addEventListener("scroll", function(){
scrollDetect();
});
function scrollDetect(){
var html = document.documentElement;
var top = (window.pageYOffset || html.scrollTop) - (html.clientTop || 0);
if(top > 235){
document.getElementById('secondheader').style.position = 'fixed';
document.getElementById('secondheader').style.marginTop = '60px';
document.getElementById('secondheader').style.width='100%';
}else{
document.getElementById('secondheader').style.position = 'inherit';
document.getElementById('secondheader').style.marginTop = '300px';
}
}
Check out this JSFiddle