I copied a content slider and im trying to make it work. Can anyone help me to make it work? Thanks.
What i need is when you click the button next, next2, next3 it will display designated text as it shown below.
http://codepen.io/kevin11/pen/Byxvqa
HTML:
<section class="demo">
<button class="next">Next</button>
<button class="prev">Next2</button>
<button class="prev2">Next3</button>
<div class="container">
<div style="display: inline-block;" >
Sample Text
On a recent trip to Moab, Utah, I noticed someone wearing an Elevate foot brace, he had one on both legs. I asked him about the braces and he told me how happy he was with them. He gave me the contact information where he had purchased them from.
I ordered one when I returned to Seattle. I have been using the standard in the shoe straps to the calf type of brace. I didnt wear it often because it wasn't easy to put on and it was uncomfortable. It was also hard to drive with the brace on. I use the brace on my right leg, with the brace being stiff it makes it difficult to push the accelerator. With the Elevate I just release the tension on the brace and can push the accelerator with no issues. The Elevate brace is comfortable and easy to put on, I love it.
- Lavon, Seattle WA
</div>
<div>
Sample Text2
On a recent trip to Moab, Utah, I noticed someone wearing an Elevate foot brace, he had one on both legs. I asked him about the braces and he told me how happy he was with them. He gave me the contact information where he had purchased them from.
I ordered one when I returned to Seattle. I have been using the standard in the shoe straps to the calf type of brace. I didnt wear it often because it wasn't easy to put on and it was uncomfortable. It was also hard to drive with the brace on. I use the brace on my right leg, with the brace being stiff it makes it difficult to push the accelerator. With the Elevate I just release the tension on the brace and can push the accelerator with no issues. The Elevate brace is comfortable and easy to put on, I love it.
- Lavon, Seattle WA
</div>
<div>
Sample Text3
On a recent trip to Moab, Utah, I noticed someone wearing an Elevate foot brace, he had one on both legs. I asked him about the braces and he told me how happy he was with them. He gave me the contact information where he had purchased them from.
I ordered one when I returned to Seattle. I have been using the standard in the shoe straps to the calf type of brace. I didnt wear it often because it wasn't easy to put on and it was uncomfortable. It was also hard to drive with the brace on. I use the brace on my right leg, with the brace being stiff it makes it difficult to push the accelerator. With the Elevate I just release the tension on the brace and can push the accelerator with no issues. The Elevate brace is comfortable and easy to put on, I love it.
- Lavon, Seattle WA
</div>
</div>
</section>
CSS:
.container {
max-width: 400px;
background-color: black;
margin: 0 auto;
text-align: center;
position: relative;
}
.container div {
background-color: white;
width: 100%;
display: inline-block;
display: none;
}
.container img {
width: 100%;
height: auto;
}
button {
position: absolute;
}
.next {
left: 5px;
width:150px;
height:100px;
}
.prev {
left: 5px;
top:125px;
width:150px;
height:100px;
}
.prev2 {
left: 5px;
top:235px;
width:150px;
height:100px;
}
Here's a way to make a content slider with minimal JavaScript. The number of <a>s should be the same as the number of <div class="content">s.
$(function() {
$('.slider nav a').on('click', function() {
show_content($(this).index());
});
show_content(0);
function show_content(index) {
// Make the content visible
$('.slider .content.visible').removeClass('visible');
$('.slider .content:nth-of-type(' + (index + 1) + ')').addClass('visible');
// Set the tab to selected
$('.slider nav a.selected').removeClass('selected');
$('.slider nav a:nth-of-type(' + (index + 1) + ')').addClass('selected');
}
});
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html, body {
background: #596283;
font: 14px Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif;
border: none;
width: 100%;
height: 100%;
}
body {
display: flex;
align-items: center;
}
.slider {
margin: 0px 20px;
position: relative;
background: #EFF1E4;
box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.2);
width: 100%;
}
.slider nav {
display: flex;
flex-wrap: wrap;
align-items: stretch;
background: #AD9897;
color: #6C5D5D;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2);
width: 150px;
}
.slider nav a {
padding: 20px 0px;
text-align: center;
width: 100%;
cursor: pointer;
}
.slider nav a:hover,
.slider nav a.selected {
background: #6C5D5D;
color: #AD9897;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
.slider .content {
padding: 20px 0px;
position: absolute;
top: 0px;
left: 150px;
color: #6C5D5D;
width: 0px;
height: 100%;
overflow: hidden;
opacity: 0;
transition: opacity 0.1s linear 0s;
}
.slider .content.visible {
padding: 20px;
width: calc(100% - 150px);
overflow: scroll;
opacity: 1;
}
.slider .content p {
padding-bottom: 8px;
}
.slider .content p:last-of-type {
padding-bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<nav>
<a>Content #1</a>
<a>Content #2</a>
<a>Content #3</a>
</nav>
<div class="content">
<p>Content #1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis magna ipsum, nec sodales lectus rutrum eleifend. Mauris laoreet tincidunt erat, nec mattis tellus luctus ac. Vivamus et pulvinar felis, a placerat dui. Aenean ornare, ipsum vel aliquet mattis, ante nibh rhoncus erat, in auctor tortor libero quis diam. Cras non purus eget enim dapibus pharetra. Integer eget commodo nisi. Quisque sed pharetra sapien. Suspendisse potenti. Aliquam ligula elit, fermentum a ex ac, porttitor fermentum velit. Phasellus quis lacinia nunc. Sed risus neque, venenatis in libero ac, auctor sagittis neque. Suspendisse hendrerit magna in sem mattis eleifend. Praesent vitae hendrerit est.</p>
<p>Nunc sit amet ante quis eros convallis dictum. Sed pretium viverra vehicula. Fusce elementum sagittis nulla, sed mollis enim cursus sed. Donec quis magna ultrices tellus consectetur pharetra vel vitae lorem. Proin eu fringilla ligula, non mollis felis. Cras scelerisque faucibus auctor. Ut auctor rutrum consectetur. Suspendisse in luctus risus. Nam condimentum, est placerat posuere commodo, libero elit maximus turpis, quis auctor mi risus a mauris. Donec rutrum, tortor sit amet viverra lobortis, nisi est varius libero, eget vestibulum arcu ex lacinia augue. Integer diam tellus, interdum vitae tellus in, accumsan suscipit velit. Sed ut blandit mauris. Etiam ac arcu eget nisi placerat feugiat. Sed laoreet, diam id iaculis tincidunt, turpis ex tristique felis, eu varius sapien lectus at justo. Donec sit amet congue erat. Curabitur nibh neque, dapibus ac placerat nec, maximus sollicitudin est.</p>
</div>
<div class="content">
<p>Content #2</p>
<p>Donec quis tortor vehicula, auctor elit nec, consequat urna. Curabitur hendrerit ipsum erat, fringilla vehicula velit lacinia eget. Suspendisse scelerisque volutpat sapien, et hendrerit est lobortis vitae. Curabitur et ultrices nibh. Sed molestie sagittis ante et gravida. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras sit amet ex tincidunt, vulputate lectus at, malesuada nibh.</p>
<p>Morbi semper, sem non scelerisque pulvinar, felis sapien accumsan quam, a viverra lorem eros et massa. Sed sed tincidunt nunc. Pellentesque semper vulputate lacus eget laoreet. Curabitur ultricies sem ut ullamcorper gravida. Cras ut ex ut dolor blandit sollicitudin vel eu tortor. Nulla pulvinar vulputate rutrum. Quisque ligula quam, aliquam pharetra enim non, scelerisque ullamcorper metus. Integer ullamcorper eros eu magna sagittis tempor. Quisque lacus ante, sagittis luctus efficitur quis, varius a nunc. Nulla risus ante, blandit sit amet dictum id, tempor sit amet leo. Morbi nec eleifend elit.</p>
</div>
<div class="content">
<p>Content #3</p>
<p>Nulla vitae nulla felis. Donec efficitur arcu id turpis auctor blandit. Cras consequat efficitur eleifend. Phasellus vel justo lectus. Mauris sed lacus ex. In vulputate, tortor ac interdum dapibus, lorem tortor interdum diam, vitae fermentum felis nisi id neque. Integer diam elit, ultricies quis suscipit sit amet, rutrum a nulla.</p>
<p>Donec quis ipsum magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean varius ante sed eros tristique fermentum. Duis sed vulputate tellus, in auctor tellus. Donec sed tempus odio. Nunc hendrerit erat nec dui sollicitudin, et ullamcorper enim mattis. Quisque accumsan rutrum turpis ut suscipit. Mauris mi ex, iaculis sit amet dui non, faucibus pellentesque eros. Fusce et congue urna, ac ultricies ipsum. Ut accumsan euismod felis, vel ornare lectus dictum ut. Aenean eget velit vulputate, placerat ligula et, maximus mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
</div>
Related
I have the following code which contains a modification of CSS code suggested by another user in one of my posted questions.
The code implements a grid which is used as a responsive footer menu, which also contains a copyright reference for the site.
The problem is that the footer covers the content of the website. Is there a way to avoid covering any of the 3 tags of the website with the tag that implements the grid?
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#content {
max-width: 720px;
margin: 100px auto 0;
}
#divleft {
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
left: calc((100% - 720px)/4);
width: 200px;
height: 400px;
border: solid;
border-color: red;
}
#divright {
position: fixed;
top: 50%;
transform: translate(50%, -50%);
right: calc((100% - 720px)/4);
width: 200px;
height: 400px;
border: solid;
border-color: red;
}
/*
The Navigation Container/Block
*/
.navbar {
background-color: #333;
position: fixed;
bottom: 0%;
right: 0%;
width: 100%;
}
/*
Grid Container
*/
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
/*
Item 1
*/
.item-1 {
text-align: end;
}
/*
Item 2
*/
.item-2 {
color: white;
display: flex;
align-items: center;
justify-content: center;
}
/*
Item 3
*/
.item-3 {
text-align: end;
display: flex;
align-items: center;
justify-content: flex-end;
}
.item-3 a {
color: #f2f2f2;
text-align: center;
padding: 15px 16px;
text-decoration: none;
}
.item-3 a:hover {
background-color: #ddd;
color: black;
}
.item-3 a.active {
background-color: #04aa6d;
color: white;
}
/*
Toggle Icon For Menu
*/
.navbar .icon {
display: none;
}
/*
This Will Display In Media Queries
*/
.copyright-bottom {
display: none;
}
/*
Media Queries
*/
#media screen and (max-width: 970px) {
.item-3 a {
display: none;
}
.navbar a.icon {
display: block;
}
.navbar.responsive .icon {
position: absolute;
right: 0;
bottom: 0;
}
.navbar.responsive a {
display: block;
text-align: left;
}
.navbar.responsive .copyright-bottom {
display: block;
text-align: center;
color: white;
}
.navbar.responsive .copyright {
display: none;
}
.navbar.responsive .item-3 {
grid-column: span 3;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section id="divleft"></section>
<section id="content">
<h2>Responsive Bottom Navbar Example</h2>
<p>Resize the browser window to see how it works.</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et viverra justo. Suspendisse quis ligula ac nibh ultricies ultrices. Etiam vel sagittis nunc. Praesent mi justo, ultrices sit amet lectus id, tincidunt volutpat nulla. Vivamus neque dolor,
elementum sit amet enim in, fringilla faucibus neque. Fusce a lectus enim. Pellentesque risus orci, efficitur et facilisis et, egestas eu eros. Sed commodo lacinia dolor eget suscipit. Ut facilisis orci lorem, et vehicula risus sollicitudin eu. Donec
aliquam urna at mi consectetur, sed condimentum velit vehicula. Nam et urna fringilla, vulputate risus ac, posuere ante. Morbi at ex et libero lobortis viverra. Donec nibh massa, faucibus a hendrerit ac, faucibus ac diam. Nunc vel gravida dui, euismod
viverra ex. Praesent elementum egestas venenatis. Duis quis nulla mi. Aliquam efficitur enim ipsum, sed venenatis tortor tempor eu. Maecenas maximus diam nec ante pellentesque, a efficitur ipsum semper. Donec sagittis enim quis nisl efficitur sodales.
Etiam porttitor tristique urna ut auctor. Mauris eget urna quis diam interdum euismod et vel turpis. Quisque vel tincidunt purus. Aliquam a mauris tortor. Vestibulum fringilla augue sit amet egestas tempus. Pellentesque pellentesque erat id porta
interdum. Vestibulum eros nibh, sagittis sit amet velit ut, auctor tincidunt tortor. Cras blandit condimentum enim ac sagittis. Nunc pretium, metus id pulvinar efficitur, nunc nunc sagittis sem, eget efficitur elit dui quis nisi. Mauris eros ex, elementum
sit amet neque at, elementum bibendum quam. Quisque ornare in lacus non maximus. Nullam volutpat, nisi vel consectetur mattis, magna ligula condimentum mauris, sed accumsan nibh augue quis dolor. Aenean id dignissim purus. Donec venenatis condimentum
nisl, quis placerat lorem suscipit nec. Vestibulum ante massa, euismod et pellentesque ut, eleifend volutpat arcu. Mauris porttitor nec orci vitae hendrerit. Suspendisse cursus urna id ullamcorper placerat. Nullam varius diam ut nibh molestie, a sodales
leo ultricies. Ut eget felis malesuada, imperdiet lectus finibus, aliquam quam. Pellentesque ac leo aliquam, viverra lorem in, dignissim nisl. Cras ligula mauris, bibendum vel ex ac, sodales ullamcorper magna. Etiam ac libero ut mi semper dignissim.
Proin eu enim at nunc porttitor mattis. Duis nec nisi vel est lacinia tincidunt. Sed interdum turpis sed ante maximus tristique. Etiam non urna placerat, ornare diam at, dictum massa. Praesent et imperdiet sem, quis varius mauris. Proin nunc elit,
vehicula non posuere sed, rhoncus vitae nunc. Duis ornare condimentum felis ut tempor. Donec tempor est nec diam gravida fermentum. Sed sit amet libero non tortor ultricies lacinia eu cursus metus. Morbi porta blandit libero sit amet laoreet. Vivamus
auctor dui sit amet turpis rutrum dapibus. Quisque tortor ipsum, interdum id sodales in, cursus at turpis. Duis dui sapien, finibus vel venenatis a, gravida nec sapien. Aenean tortor lorem, venenatis eu quam ac, ullamcorper pulvinar erat. In hac habitasse
platea dictumst. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus eleifend interdum mattis. Praesent et mi nec lacus mattis dictum quis et augue. Donec aliquam rutrum felis ac vestibulum. Sed vehicula
luctus enim. Vivamus pharetra neque nec ante tincidunt, quis lobortis quam rutrum. Nulla non consequat mauris, vel posuere nisi. Fusce varius imperdiet libero sit amet mattis. Vivamus ut efficitur velit, quis dapibus nisi. Pellentesque tempus turpis
nec tortor mollis, in euismod lectus porttitor. Proin dignissim accumsan nisi a sollicitudin. Pellentesque scelerisque ipsum eu risus mollis dapibus. Cras eget ornare odio, ac ultricies urna. Aliquam porttitor nunc leo, eleifend pretium magna congue
ac. In ut odio et ante tincidunt malesuada vel ac velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean vestibulum tempus velit, nec maximus quam. Proin pellentesque risus vel enim dictum tincidunt. Curabitur purus turpis, efficitur
eu velit in, efficitur tincidunt neque. Proin dignissim efficitur nisl sit amet efficitur. Sed dictum tellus eu turpis porta porta. Vestibulum in ipsum urna. Donec finibus sed lacus sed mattis. Fusce lacinia mauris vitae mauris lobortis, ut auctor
neque posuere. Donec scelerisque mauris in justo cursus varius. Aliquam varius sodales diam vel iaculis. In et malesuada velit, nec pulvinar lacus. Quisque eu auctor tortor. Ut iaculis placerat lacus, quis tempor erat lacinia in. Vivamus tempor purus
velit, vel mollis enim pellentesque sed. Aenean euismod lobortis ultrices. In volutpat sem vitae iaculis dignissim. Sed auctor, leo lobortis aliquam sodales, tellus tortor mattis dolor, sed iaculis elit purus eu nisi. Donec viverra laoreet ipsum eget
pulvinar. Sed nisl ipsum, congue id ornare eu, vulputate vitae turpis. Suspendisse feugiat dui at elit placerat eleifend. Morbi quam ligula, eleifend nec elit vel, lacinia vehicula nibh. Maecenas in orci ut odio aliquam sodales a vitae urna. Maecenas
eget interdum dolor. Integer vel magna mi. Suspendisse at consectetur lectus, sed accumsan erat. Aliquam erat volutpat. Mauris non mauris auctor, fringilla arcu vitae, bibendum justo. Sed pulvinar et magna eget cursus. Etiam quis risus vitae ipsum
pharetra vulputate. Vestibulum commodo ac nisl sit amet porta. Ut ultrices tristique ipsum et commodo. Integer urna ipsum, vehicula convallis metus suscipit, euismod rhoncus lectus. Mauris elementum odio ut odio aliquam, ut fringilla tellus facilisis.
In vitae arcu ut orci pellentesque consequat. Maecenas sit amet sem a sem varius porta ut a risus. Phasellus ac lacus aliquam, mollis felis vel, finibus arcu. Ut sodales nulla odio, sit amet sodales nibh bibendum ac. Sed purus dolor, iaculis et nunc
sit amet, viverra maximus nisl.
</section>
<section id="divright"></section>
<footer class="navbar" id="myNavbar">
<div class="grid-container">
<div class="item-1"></div>
<div class="item-2">
<p class="copyright">© domain.com</p>
</div>
<div class="item-3">
About
Contact
News
Home
<a href="javascript:void(0);" style="font-size: 15px" class="icon" onclick="myFunction()">☰</a
>
</div>
</div>
<p class="copyright-bottom">© domain.com</p>
</footer>
</body>
</html>
You Can Use This:
you can change the value with the one you want!
#content
{
margin-bottom:70px;
}
You can update your footer like this, so the footer doesn't cover your text.
Your two ad bars have a fixed height and width, so your footer will cover those on different screen sizes.
.navbar {
background-color: #333;
position: sticky;
bottom: 0;
right: 0;
width: 100%;
}
And then introduce flexbox to stretch your content. Your code looks then something like this:
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
display: flex;
flex-direction: column;
min-height: 100vh;
}
#content {
max-width: 720px;
margin: 100px auto 0;
flex: 1;
}
#divleft {
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
left: calc((100% - 720px)/4);
width: 200px;
height: 400px;
border: solid;
border-color: red;
}
#divright {
position: fixed;
top: 50%;
transform: translate(50%, -50%);
right: calc((100% - 720px)/4);
width: 200px;
height: 400px;
border: solid;
border-color: red;
}
/*
The Navigation Container/Block
*/
.navbar {
background-color: #333;
position: sticky;
bottom: 0%;
right: 0%;
width: 100%;
}
/*
Grid Container
*/
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
/*
Item 1
*/
.item-1 {
text-align: end;
}
/*
Item 2
*/
.item-2 {
color: white;
display: flex;
align-items: center;
justify-content: center;
}
/*
Item 3
*/
.item-3 {
text-align: end;
display: flex;
align-items: center;
justify-content: flex-end;
}
.item-3 a {
color: #f2f2f2;
text-align: center;
padding: 15px 16px;
text-decoration: none;
}
.item-3 a:hover {
background-color: #ddd;
color: black;
}
.item-3 a.active {
background-color: #04aa6d;
color: white;
}
/*
Toggle Icon For Menu
*/
.navbar .icon {
display: none;
}
/*
This Will Display In Media Queries
*/
.copyright-bottom {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section id="divleft"></section>
<section id="content">
<h2>Responsive Bottom Navbar Example</h2>
<p>Resize the browser window to see how it works.</p>
viverra ex. Praesent elementum egestas venenatis. Duis quis nulla mi. Aliquam efficitur enim ipsum, sed venenatis tortor tempor eu. Maecenas maximus diam nec ante pellentesque, a efficitur ipsum semper. Donec sagittis enim quis nisl efficitur sodales.
Etiam porttitor tristique urna ut auctor. Mauris eget urna quis diam interdum euismod et vel turpis. Quisque vel tincidunt purus. Aliquam a mauris tortor. Vestibulum fringilla augue sit amet egestas tempus. Pellentesque pellentesque erat id portaviverra ex. Praesent elementum egestas venenatis. Duis quis nulla mi. Aliquam efficitur enim ipsum, sed venenatis tortor tempor eu. Maecenas maximus diam nec ante pellentesque, a efficitur ipsum semper. Donec sagittis enim quis nisl efficitur sodales.
Etiam porttitor tristique urna ut auctor. Mauris eget urna quis diam interdum euismod et vel turpis. Quisque vel tincidunt purus. Aliquam a mauris tortor. Vestibulum fringilla augue sit amet egestas tempus. Pellentesque pellentesque erat id portaviverra ex. Praesent elementum egestas venenatis. Duis quis nulla mi. Aliquam efficitur enim ipsum, sed venenatis tortor tempor eu. Maecenas maximus diam nec ante pellentesque, a efficitur ipsum semper. Donec sagittis enim quis nisl efficitur sodales.
Etiam porttitor tristique urna ut auctor. Mauris eget urna quis diam interdum euismod et vel turpis. Quisque vel tincidunt purus. Aliquam a mauris tortor. Vestibulum fringilla augue sit amet egestas tempus. Pellentesque pellentesque erat id portaviverra ex. Praesent elementum egestas venenatis. Duis quis nulla mi. Aliquam efficitur enim ipsum, sed venenatis tortor tempor eu. Maecenas maximus diam nec ante pellentesque, a efficitur ipsum semper. Donec sagittis enim quis nisl efficitur sodales.
Etiam porttitor tristique urna ut auctor. Mauris eget urna quis diam interdum euismod et vel turpis. Quisque vel tincidunt purus. Aliquam a mauris tortor. Vestibulum fringilla augue sit amet egestas tempus. Pellentesque pellentesque erat id portaviverra ex. Praesent elementum egestas venenatis. Duis quis nulla mi. Aliquam efficitur enim ipsum, sed venenatis tortor tempor eu. Maecenas maximus diam nec ante pellentesque, a efficitur ipsum semper. Donec sagittis enim quis nisl efficitur sodales.
Etiam porttitor tristique urna ut auctor. Mauris eget urna quis diam interdum euismod et vel turpis. Quisque vel tincidunt purus. Aliquam a mauris tortor. Vestibulum fringilla augue sit amet egestas tempus. Pellentesque pellentesque erat id portaviverra ex. Praesent elementum egestas venenatis. Duis quis nulla mi. Aliquam efficitur enim ipsum, sed venenatis tortor tempor eu. Maecenas maximus diam nec ante pellentesque, a efficitur ipsum semper. Donec sagittis enim quis nisl efficitur sodales.
Etiam porttitor tristique urna ut auctor. Mauris eget urna quis diam interdum euismod et vel turpis. Quisque vel tincidunt purus. Aliquam a mauris tortor. Vestibulum fringilla augue sit amet egestas tempus. Pellentesque pellentesque erat id porta
interdum. Vestibulum eros nibh, sagittis sit amet velit ut, auctor tincidunt tortor. Cras blandit condimentum enim ac sagittis. Nunc pretium, metus id pulvinar efficitur, nunc nunc sagittis sem, eget efficitur elit dui quis nisi. Mauris eros ex, elementum
sit amet neque at, elementum bibendum quam. Quisque ornare in lacus non maximus. Nullam volutpat, nisi vel consectetur mattis, magna ligula condimentum mauris, sed accumsan nibh augue quis dolor. Aenean id dignissim purus. Donec venenatis condimentum
nisl, quis placerat lorem suscipit nec. Vestibulum ante massa, euismod et pellentesque ut, eleifend volutpat arcu. Mauris porttitor nec orci vitae hendrerit. Suspendisse cursus urna id ullamcorper placerat. Nullam varius diam ut nibh molestie, a sodales
leo ultricies. Ut eget felis malesuada, imperdiet lectus finibus, aliquam quam. Pellentesque ac leo aliquam, viverra lorem in, dignissim nisl. Cras ligula mauris, bibendum vel ex ac, sodales ullamcorper magna. Etiam ac libero ut mi semper dignissim.
Proin eu enim at nunc porttitor mattis. Duis nec nisi vel est lacinia tincidunt. Sed iut fringilla tellus facil
</section>
<section id="divright"></section>
<footer class="navbar" id="myNavbar">
<div class="grid-container">
<div class="item-1"></div>
<div class="item-2">
<p class="copyright">© domain.com</p>
</div>
<div class="item-3">
About
Contact
News
Home
<a href="javascript:void(0);" style="font-size: 15px" class="icon" onclick="myFunction()">☰</a
>
</div>
</div>
<p class="copyright-bottom">© domain.com</p>
</footer>
</body>
</html>
It will work with less content also fine.
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
display: flex;
flex-direction: column;
min-height: 100vh;
}
#content {
max-width: 720px;
margin: 100px auto 0;
flex: 1;
}
#divleft {
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
left: calc((100% - 720px)/4);
width: 200px;
height: 400px;
border: solid;
border-color: red;
}
#divright {
position: fixed;
top: 50%;
transform: translate(50%, -50%);
right: calc((100% - 720px)/4);
width: 200px;
height: 400px;
border: solid;
border-color: red;
}
/*
The Navigation Container/Block
*/
.navbar {
background-color: #333;
position: sticky;
bottom: 0%;
right: 0%;
width: 100%;
}
/*
Grid Container
*/
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
/*
Item 1
*/
.item-1 {
text-align: end;
}
/*
Item 2
*/
.item-2 {
color: white;
display: flex;
align-items: center;
justify-content: center;
}
/*
Item 3
*/
.item-3 {
text-align: end;
display: flex;
align-items: center;
justify-content: flex-end;
}
.item-3 a {
color: #f2f2f2;
text-align: center;
padding: 15px 16px;
text-decoration: none;
}
.item-3 a:hover {
background-color: #ddd;
color: black;
}
.item-3 a.active {
background-color: #04aa6d;
color: white;
}
/*
Toggle Icon For Menu
*/
.navbar .icon {
display: none;
}
/*
This Will Display In Media Queries
*/
.copyright-bottom {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section id="divleft"></section>
<section id="content">
<h2>Responsive Bottom Navbar Example</h2>
<p>Resize the browser window to see how it works.</p>
venenatis tortor tempor eu. Maecenas maximus diam nec ante pellentesque, a efficitur ipsum semper. Donec sagittis enim quis nisl efficitur sodales.
Etiam porttitor tristique urna ut auctor. Mauris eget urna quis diam interdum euismod
</section>
<section id="divright"></section>
<footer class="navbar" id="myNavbar">
<div class="grid-container">
<div class="item-1"></div>
<div class="item-2">
<p class="copyright">© domain.com</p>
</div>
<div class="item-3">
About
Contact
News
Home
<a href="javascript:void(0);" style="font-size: 15px" class="icon" onclick="myFunction()">☰</a
>
</div>
</div>
<p class="copyright-bottom">© domain.com</p>
</footer>
</body>
</html>
I've tried a few suggestions like removing overflow from the body, adding a z-index to header and padding-top but nothing seems to work.
It worked fine at first but then I implemented a lot of Lorem Ipsum text. All the content just slides up and below the navbar. I've attached a JS fiddle to explain.
I tried the whole body overflow and tried the fixed/relative header positions. Nothing works.
Any input would seriously be appreciated A LOT.
I would love some help in how can I make the nav stick but not really stay fixed when I scroll down.
And of course, how to make the contents not overflow horizontally.
Please help!
CSS
html,
body {
position: absolute;
width: 100%;
top: 0;
min-height: 100vh;
font-family: sans-serif;
margin: 0 !important;
padding: 0 !important;
}
ul {
box-sizing: border-box;
}
#logo {
max-width: 15%;
}
.menu-wrapper {
background-color: white;
}
.header {
z-index: 1000;
width: 100%;
margin: 1.2em;
position: fixed;
background-color: black;
}
#about {
position: absolute;
max-width: 100%;
top: 49%;
left: 50%;
transform: translate(-50%, -50%);
border: 5px solid purple;
padding: 20px;
text-align: center;
justify-content: center;
}
.about-par {
font-size: 1em;
}
.header ul {
padding: 0;
list-style: none;
overflow: hidden;
margin-right: 2em;
}
.header li a {
display: block;
color: blue;
text-decoration: none;
font-size: 1em;
}
.header li a:hover,
.header .menu-btn:hover {
color: black;
}
.header li a:active,
.header .menu-btn: active,
{
color: blue;
}
.header li a:active {
color: blue;
}
.header .logo {
color: black;
display: block;
float: left;
font-size: 1.1em;
padding: 12px;
margin-left: 1em;
text-decoration: none;
}
.header .menu {
clear: both;
max-height: 0;
transition: max-height 0.2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 40px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
display: block;
height: 2px;
position: relative;
transition: background 0.2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: black;
content: "";
display: block;
height: 100%;
position: absolute;
transition: all 0.2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon: before {
background: transparent;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked~.menu {
max-height: 340px;
background-color: black;
}
.header .menu-btn:checked~.menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* Responsive */
#media only screen and (max-width: 768px) {
.header li a {
padding: 15px;
border-bottom: 1px dotted #ddd;
color: white;
}
.header li a:hover {
padding: 15px;
border-bottom: 1px dotted #ddd;
color: blue;
}
}
#media only screen and (min-width: 768px) {
.menu-wrapper {
width: 100%;
}
.header li {
float: left;
}
.header .logo {
line-height: 1;
}
.header li a {
color: blue;
padding: 0px 30px;
border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src="script.js"></script>
<link href="style.css" rel="stylesheet">
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="initial-scale=1, width=device-width shrink-to-fit=no">
<title>Hello! </title>
</head>
<body>
<div class="empty"></div>
<div class="all">
<div class="menu-wrapper">
<header class="header">
Logo
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>Home</li>
<li>About Us</li>
<li>More</li>
<li>More2</li>
</ul>
</header>
</div>
</div>
<div class="row">
<div class="container-fluid" id="about">
<h5>Text</h5>
<div class="col-lg-12">
<article>
<p class="about-par">
Pellentesque in ipsum id orci porta dapibus. Cras ultricies ligula sed magna dictum porta. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Proin eget tortor risus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat.
<br>
Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
<br>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec sollicitudin molestie malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec sollicitudin molestie malesuada.
<br>
Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta. Proin eget tortor risus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec sollicitudin molestie malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Cras ultricies ligula sed magna dictum porta.
<br>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Quisque velit nisi, pretium ut lacinia in, elementum id enim.
<br>
Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Cras ultricies ligula sed magna dictum porta. Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla porttitor accumsan tincidunt. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
<br>
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Donec rutrum congue leo eget malesuada.
<br>Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla quis lorem ut libero malesuada feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Donec rutrum congue leo eget malesuada.
<br>Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla quis lorem ut libero malesuada feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Donec rutrum congue leo eget malesuada.
<br>Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla quis lorem ut libero malesuada feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</article>
</div>
</div>
</div>
</body>
</html>
JSFIDDLE
https://jsfiddle.net/janie2000/pf3L4y1d/5/
Thank you so much.
You want for header to always stay on top, but to not cover your content, correct?
If i got you right then what you need to do is to to change your main content wrapper which is #about element, you need to have only this element scrollable, not whole page.
For this i propose this css:
#about {
max-width: 100%;
position:relative;
top:100px;
border: 5px solid purple;
padding: 20px;
text-align: center;
justify-content: center;
height:100px;
overflow:scroll;
}
So here we are chaging the position to be relative, so we can move the content down by the height of navigation (top:100px)
Then we limit the height of this component (height:100px) and making it scrollable (overflow:scrool) - so that you can scroll, and when you do - you scrolling on the content, not the whole page, so navbar with fixed position is staying on top
Here is the fiddle - https://jsfiddle.net/t2a4938f/12/
I've set approximate values, you can play around for better view
UPDATE
And if you want for the content to take full height of the screen (not limiting to some strict height like above - 100px), you could use height:100vh
Because you are using bootstrap, I link you my jsfiddle that should work for you.
No css or js needed, bootstrap will do the work for you
JSFIDDLE: https://jsfiddle.net/9yeb023u/1/
I created a basic navbar but you can customize it, if you have any problem go to the documentations of bootstrap at this link:
https://getbootstrap.com/docs/4.5/getting-started/introduction/
The header is sticky and the body content would always below the header.
h.header {
width: 100%;
top: 0;
position: sticky;
background-color: black;
}
#about {
max-width: 100%;
border: 5px solid purple;
padding: 20px;
text-align: center;
justify-content: center;
}
I am trying to add top bar on a webpage which has 2 other elements that are top:0 and position:fixed. For example, think of a website with wp-admin bar and a menubar fixed on top.
I am creating a plugin & so I cannot modify the website's code, but can override styles.
Here is my CSS:
.bar-render-top
{
top:0px;
margin-top: 0px;
position: fixed;
z-index: 999999;
width:100% !important;
}
I can see the bar but the others are hidden under it. What I would like for them is to 'move down'. I could add custom css and find the elements' css and add margins, but since this is a plugin, it should work on any website. So I cannot add site-specific styles.
Ideally, this should behave like the mozbar chrome addon, which adds a topbar as an iframe.
Is this possible? Any help would be highly appreciated.
Thank much.
body {
background-color: white;
margin: 0;
padding: 0;
padding-top: 90px;
}
.fixed-bar {
width: 100%;
position: fixed;
top: 0;
height: 40px;
line-height: 40px;
text-align: center
}
.bar-1 {
background-color: gold;
}
.bar-2 {
background-color: pink;
margin-top: 40px;
}
.my-bar {
background-color: blue;
height: 40px;
line-height: 40px;
text-align: center;
color: white;
}
<div class="fixed-bar bar-1">
fixed bar one
</div>
<div class="fixed-bar bar-2">
fixed bar two
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales libero enim, sed convallis leo ornare eget. Nullam condimentum, diam ullamcorper sollicitudin fringilla, eros nisi placerat tellus, at volutpat velit felis eu ipsum. Suspendisse sed
nisl a orci dapibus euismod et eget odio. Maecenas elementum erat elit, et efficitur ex feugiat ac. Nam convallis blandit nisl, finibus pretium tortor vehicula at. Sed ultricies finibus consectetur. Nulla nec diam a velit pellentesque consequat ut
a lorem. Fusce eget massa lorem. In egestas risus non nisi condimentum facilisis. Quisque vulputate est ut odio vestibulum, at vulputate tellus lacinia. Ut interdum magna id velit lacinia, nec lobortis velit consequat. Ut et malesuada risus. In interdum
eleifend est auctor tincidunt. Nulla facilisi. Proin faucibus ex euismod, porta purus ut, volutpat nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut mattis volutpat tempus. Vivamus condimentum velit in
lacus ultrices ultricies. Morbi bibendum mauris ac pretium sagittis. Duis eget augue dapibus, convallis ante ut, accumsan ligula. Morbi cursus tellus viverra justo rutrum lobortis
</div>
<div class="my-bar">
this has to be on the top of any generic page
</div>
I ended up adding a margin-top to fixed elements at render and on scroll events.
My main top bar is rendered as <div id="appbar-container">...</div> id (to avoid being pushed too). Then I do it like that:
const APPBAR_HEIGHT = 64;
const translateFixed = () => {
Object.assign(document.body.style, {
position: "relative",
top: APPBAR_HEIGHT + "px",
});
for (let e of Array.from(document.body.getElementsByTagName("*"))) {
if (
e instanceof HTMLElement &&
e.getAttribute("id") !== "appbar-container"
) {
const position = getComputedStyle(e)
.getPropertyValue("position")
.toLocaleLowerCase();
const top = e.getBoundingClientRect().top;
if (position === "fixed" && top >= 0 && top <= APPBAR_HEIGHT) {
e.style.marginTop = APPBAR_HEIGHT + "px";
e.classList.add("appbar-offset");
} else if (e.classList.contains("appbar-offset")) {
e.style.marginTop = "0";
}
}
}
};
// Initial push
translateFixed();
// Push on scroll
document.addEventListener("scroll", translateFixed);
I am not very proud of it though to be honest and I think there is room for improvement... But, well, it works.
If you know the height of your bar, you can wrap all the content of the page with your own block, add some margin above it, and then add your bar using JS. Also it would be nice to set a background color to your bar. Here is an example using jQuery:
$('body').children().wrapAll('<div class="bar-render-content" />');
$('body').prepend('<div class="bar-render-top">Test bar</div>');
.bar-render-top
{
top:0px;
margin-top: 0px;
position: fixed;
z-index: 999999;
width:100% !important;
margin-bottom:50px;
background-color: lightgrey;
}
.bar-render-content
{
margin-top:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<div class="any">
Any text
</div>
<div class="content">
Lorem ipsum porttitor malesuada fusce adipiscing gravida eu sit tellus nam justo sem metus, elementum lorem adipiscing. Enim commodo malesuada porttitor ultricies diam, auctor congue sodales eros sem quisque, risus magna donec integer, lorem donec diam magna vivamus. Adipiscing bibendum pellentesque curabitur orci proin tempus sapien amet: lorem tempus. Quam nam, ipsum magna justo nam lorem nam, eu a fusce donec sed eget metus mauris ligula sagittis rutrum ultricies non at. Sed quisque lectus duis, ut magna malesuada: vivamus — in sagittis porta tempus: curabitur odio — magna risus, sapien — elementum, maecenas porttitor risus integer.
Urna amet orci auctor elementum, magna justo arcu a auctor bibendum sem proin auctor amet justo metus morbi odio maecenas porttitor. Porta magna integer porttitor tellus eros nec ultricies magna rutrum curabitur, porttitor integer nam, sem non orci non nulla.
</div>
</body>
Please have a look at the following code
https://jsfiddle.net/kamrant/qku5cp1w/1/
#wrapper {
position: relative;
border: 1px solid gray;
height: 100%
}
#panel {
height: 35px;
width: 100%;
position: absolute;
background: #EEEEEE;
bottom: 0;
}
The bottom panel acts fine (stays at the bottom of its container) however I have a tree view inside the container and when the tree is expanded as a result the container height increases, when scroll, my bottom panel stay where it is and does not adjust its position to the bottom of the container.
Any solution for this?
#main {
width: 400px;
float: left;
}
#container {
width: 400px;
float: left;
position: relative;
}
#wrapper {
width: 400px;
float: left;
position: relative;
border: 1px solid gray;
height: 100%;
min-height: 600px;
padding: 0 0 35px 0;
}
#panel {
height: 35px;
width: 100%;
position: absolute;
background: #EEEEEE;
bottom: 1px;
left: 1px;
}
#otherstuff {
height: 100px;
width: 400px;
background: gray;
margin-top: 10px;
float: left;
}
<div id="main">
<div id="container">
<div id="wrapper">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum ligula id neque laoreet lobortis. Nam laoreet ligula nec sapien finibus, interdum efficitur odio sollicitudin. Vivamus vitae erat nibh. Curabitur non magna quis sapien elementum porttitor vel et nulla. Nunc ultricies nisi quis eros ullamcorper, vitae malesuada velit venenatis. Suspendisse ultricies justo non ipsum pellentesque, eu consectetur massa ultricies. Morbi vel euismod erat, in condimentum elit. Aenean blandit mi ut nulla convallis, nec pellentesque mi facilisis. Sed vitae viverra mi, eu dapibus magna. Sed sollicitudin, velit sit amet tristique placerat, ante massa semper mi, id ultrices elit libero sit amet velit. Vivamus vitae lorem pretium nulla iaculis aliquet. Duis elementum erat vel pretium viverra. Phasellus ac ante quis tortor sollicitudin tristique. Ut tellus sem, congue sed arcu nec, venenatis efficitur risus. Curabitur ullamcorper viverra sapien ut maximus. Quisque ac elit finibus, fringilla diam ac, fermentum sapien.<br /><br />
Donec mattis sapien quis risus dictum aliquet. Etiam tristique tristique ex ut pharetra. Nulla vehicula tempor mauris ac ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu varius dui. Curabitur ornare nibh hendrerit eros lacinia semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean turpis dolor, posuere sit amet sapien quis, luctus viverra leo. Vivamus auctor, lorem et tempus fermentum, lorem velit ultrices nisi, ac bibendum felis ante vel erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet vitae mauris nec fermentum. asd
</div>
<div id="panel">do stuff</div>
</div>
<div id="otherstuff"></div>
</div>
Try this.
You have set the height of the container to 600px (I changed it to 100 for easier viewing on jsfiddle) which restricts the growth. Would be better use to use min-height, allowing div height to grow as content grows.
I suggest putting content inside its own div, so I made a new div ("tree") to contain the tree view you were talking about. This allows you to target just the content of this div in the future, should it come to that.
When you have an absolute position, it will take up the the space the inside which the div it belongs to, hence the extra padding inside the .tree css to allow for that content to not overlap the "tree" div.
#container {
min-height: 100px;
width: 400px;
}
See jsfiddle for the full code https://jsfiddle.net/jennift/qku5cp1w/4/
Im trying to make a fixed div stick to the top once scrolled down.
See example - Desired effect would be for the green left column to remain anchored to the top once you have scrolled down past the red block.
Example - JS FIDDLE
HTML
<div id="block">block</div>
<div id="content">
<div id="left">fixed</div>
<div id="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consequat neque ac diam pulvinar aliquet. Sed cursus mauris a ipsum ultricies malesuada. Integer vel velit accumsan, sagittis ipsum et, lacinia tellus.</p>
<p>Praesent consequat lacus sed dui sagittis, nec interdum tellus viverra. Donec tincidunt augue justo, in eleifend leo rutrum id. Nam feugiat iaculis neque a tincidunt. In condimentum tortor quis vestibulum pharetra. Vestibulum in elit ut tortor ultricies faucibus a eu augue. Quisque dignissim nec nibh non malesuada.</p>
<p>In ligula tellus, facilisis ac purus sed, congue congue justo. Aliquam consequat nunc lorem, nec mattis lorem facilisis quis. Aliquam vel eleifend nunc.</p>
<p>Praesent consequat lacus sed dui sagittis, nec interdum tellus viverra. Donec tincidunt augue justo, in eleifend leo rutrum id. Nam feugiat iaculis neque a tincidunt. In condimentum tortor quis vestibulum pharetra. Vestibulum in elit ut tortor ultricies faucibus a eu augue. Quisque dignissim nec nibh non malesuada.</p>
<p>In ligula tellus, facilisis ac purus sed, congue congue justo. Aliquam consequat nunc lorem, nec mattis lorem facilisis quis. Aliquam vel eleifend nunc.</p>
</div>
</div>
CSS
#block {
background: #B84B3D;
width: 100%;
height: 200px;
position: fixed;
z-index: 0;
font-size: 16px;
color: #fff;
text-align: right;
}
#content {
margin-top: 160px;
float: left;
}
#left {
background: #73CC66;
width: 50%;
height: 100%;
font-size: 16px;
color: #fff;
position: absolute;
}
#right {
background-color: rgba(255,255,255,0.8);
width: 50%;
float: right;
color: #ccc;
z-index: 10;
position: relative;
}
Is there a way to do this with CSS or more practical with JS?
Thanks in advance
Modify your css with this
#left {
background: #73CC66;
width: 50%;
height: 300px;
font-size: 16px;
color: #fff;
float:left;
position: static;
}
and apply this javascript
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript" ></script>
<script>
window.onscroll = function(){
if( window.XMLHttpRequest ) {
var position=window.pageYOffset;
if ( position > 160) {
$('#left').css({'position':'fixed', 'top':'0' });
} else {
$('#left').css({'position':'static', 'top':'auto' });
}
}
}
</script>
Hope this works