I want a div at the top of the page that does not move, but I want the rest of the page below that to be scrollable. The scrollbar can only start below the div.
is this possible without using a frame
thanks in advance
html
<div id="main">
<div id="header"> Header Content</div>
<div id="content">
<ul><li>Hello World!!! </li>
<li>Hello World!!! </li>
<li>Hello World!!! </li>
<li>Hello World!!! </li>
<li>Hello World!!! </li>
</ul>
</div>
css
body { margin: 0;}
#main{
position: absolute;
width: 100%;
top: 0;
bottom: 0;}
#header
{
position: absolute;
height: 41px;
top: 0;
left: 0;
right: 0;
text-align:center;
display:block;
background: blue;
}
#content
{
position: absolute;
top: 41px;
bottom: 0;
left: 0;
right: 0;
overflow-y:scroll;
}
li{
text-decoration: none;
display: block;
height: 20px;
padding: 20px;
}
Demo update
Yes u can do it with
.some-class {
position: fixed;
top: 0
...
}
Related
I'm trying to create an effect where you hover over a link and the image in the backgound changes depending on which link was hovered.
function changeImage(artistCover){
document.getElementById('slider').src = artistCover;
}
a {
color:#ffffff;
}
a:hover {
color: orange;
}
.imgArea {
height:100vh; display:flex; justify-content:center; align-items:center;
}
.imgArea img {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.imgArea:before {
content:"";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
z-index:0;
}
ul li {
list-style-type: none; font-size: 24px;line-height: 2em;
font-variant: small-caps;font-weight: bold; text-align:center;
}
<div class="imgArea">
<img src="destinyschild.jpeg" id="slider">
<div style="position:absolute;">
<ul>
<li>
Destiny’s Child
</li>
<li>
Little Mix
</li>
<li>
Pele
</li>
<li>
Chris Brown
</li>
</ul>
</div>
</div>
The above code works and replaces the image without a fade effect. What do I need to add/modify to get the crosfade effect to work?
Here's a JSFiddle example of my script as well. Many thanks in advance!
I've never used Javascript and I've only been programming for less than a year, so please don't blame me if I did something stupid. My question is, how do I close the sidebar when a button is clicked? I guess I should make it in Javascript but I don't know how.
Here is my JS code:
function show(){
document.getElementById('sidebar').classList.toggle('active')
document.getElementById('sidebarbg').classList.toggle('active')
}
CSS code (that's not the full css code obviously, I deleted the most) :
#sidebar{
background-color: #cc2f70;
width: 310px;
height: 100%;
position: fixed;
left: -310px;
transition-duration: 0.3s;
}
#sidebarbg{
background-color: #00a6b7;
width: 300px;
height: 100%;
position: fixed;
left: -300px;
transition-delay: 0.15s;
transition-duration: 0.3s;
}
#sidebar.active{
left: 0;
}
#sidebarbg.active{
left: 0;
}
#sidebar ul{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.button{
position: fixed;
top: 30px;
left: 220px;
z-index: 5;
transition: 0.4s;
}
.button span{
width: 30px;
height: 5px;
background-color: white;
display: block;
margin: 5px;
}
html:
<div class="button" onclick="show()">
<span>click here</span>
<span></span>
<span></span>
</div>
<div class="logo">
<span>lo</span><br><span>go</span>
</div>
<div id="sidebar">
<div id="sidebarbg"></div>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
add this script
var lis = document.querySelectorAll("ul li");
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener("click", show);
}
I have two section on screen, Left Side has menu items and right side has content. Content div is fixed position with auto scroll.
Left Side menu has 3 items and on click on any item, i want user to navigate to That particular section on content div(fixed) .
MY CODE
function goToByScroll(id) {
// Scroll
$('.content-pos-fixed').animate({
scrollTop: $("#" + id).offset().top - 152
},'slow');
}
For some reason It does not work as expected.
Try this code
function goToByScroll(id,event) {
event.preventDefault();
$('.content-pos-fixed').animate({
scrollTop: $(id).offset().top+$('.content-pos-fixed').scrollTop()
},'slow');
}
$(document).ready(function(){
$('a').on('click',function(event){
var id=$(this).attr('href');
goToByScroll(id,event);
});
function goToByScroll(id,event) {
event.preventDefault();
$('.content-pos-fixed').animate({
scrollTop: $(id).offset().top+$('.content-pos-fixed').scrollTop() },'slow');
}
});
* { margin: 0; padding: 0; box-sizing: border-box; font-family: arial; text-decoration: none; color: black; }
nav { position: fixed; top: 0; left: 0; right: 0; background: #fff; z-index: 9999; }
nav a { color: white; display: inline-block; padding: 1rem; float: left; font-weight: bold; }
section { height: 100vh; }
nav a:nth-child( 3n + 1), main section:nth-child( 3n + 1) { background: #B1A464; }
nav a:nth-child( 3n + 2), main section:nth-child( 3n + 2) { background: #2d74b2; }
nav a:nth-child( 3n + 3), main section:nth-child( 3n + 3) { background: #e5ec10; }
nav a:nth-child( 3n + 4), main section:nth-child( 3n + 4) { background: #cfa5df; }
div { position: relative; padding: 1rem; }
footer { background: rgba(255, 255, 255, 0.4); height: 55px; position: fixed; bottom: 0; left: 0; right: 0; z-index: 7777; }
.down { background: white; display: block; border-radius: 100px; width: 50px; height: 50px; position: fixed; bottom: 5%; right: 5%; z-index: 8888; }
.down::after { content: "▼"; position: relative; left: 15px; top: 15px; }
nav a {
color: white;
display: inline-block;
padding: 1rem;
float: left;
font-weight: bold;
width: 100%;
}
nav {
position: fixed;
/* top: 0; */
left: 0;
right: 0;
background: #fff;
z-index: 9999;
width: 300px;
height: 100%;
}
main {
float: right;
width: calc(100% - 300px);
overflow: auto;
position: fixed;
right: 0;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<nav data-scroll-header>
<a data-scroll href="#Home">Home</a>
<a data-scroll href="#About">About</a>
<a data-scroll href="#Services">Services</a>
<a data-scroll href="#Contact">Contact</a>
</nav>
<main class="content-pos-fixed">
<section id="Home">
<div>
<h1>Home</h1>
</div>
</section>
<section id="About">
<div>
<h1>About</h1>
</div>
</section>
<section id="Services">
<div>
<h1>Services</h1>
</div>
</section>
<section id="Contact">
<div>
<h1>Contact</h1>
</div>
</section>
</main>
<footer>
<a data-scroll href="#About" class="down"></a>
</footer>
Fiddle.
Description of problem:
When clicking the Click me button, the .list element fades in on top of the Menu button, in spite of it having a lower z-index value. I assume it has to do with inheritance, but I have explicitly specified a higher z-index value for the .keep-on-top element, so I'm confused by the behavior I'm seeing.
Desired outcome:
I would like for the .list element (i.e. the black box) to fade in beneath the menu button but above the blue .header-color div. I welcome any solutions.
Code:
HTML:
<div class="header">
<div class="header-color"></div>
<div class="keep-on-top"><button>Menu</button></div>
</div>
<div class="list">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<br/><br/><br/><br/><br/><br/>
<button>Click me!</button>
CSS:
.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
z-index: 2;
}
.header-color {
background-color: #0099cc;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
z-index: 1;
}
.keep-on-top {
position: absolute;
color: #fff;
z-index: 4;
}
.list {
background-color: #000000;
position: absolute;
z-index: 3;
color: #fff;
display: none;
}
Remove z-index from class header
I'm trying to use jQuery to animate a menu, making it enter the page from off screen when clicked. When I click on the menu button, the button just highlights. It's not working, what am I missing? Here's the code:
HTML
<html>
<head>
<title>Mrs. Rogers Math</title>
<link type="text/css" rel="stylesheet" href="mrm2.css"/>
<!--LINK TO JQUERY & FILE-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="header">
<img id="logoImg" src="http://www.mrsrogersmath.net/SVG_logo_2.png" alt="logoImg">
<img class="menuButton" src="http://www.mrsrogersmath.net/menuButton.png" alt="menuButton">
<ul class="menu">
<li id="menuLinks">Home </li>
<li id="menuLinks">Math Fun </li>
<li id="menuLinks">Helpful Links </li>
<li id="menuLinks">Contact Me </li>
</ul>
</div>
<script>document.write(jQuery.now());</script>
</body>
</html>
CSS
#header{
position: relative;
background-color:#636363;
width: auto;
height: 106px;
z-index: -1;
}
#logoImg{
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
.menuButton{
position: absolute;
right: 10px;
top: 20px;
z-index: 1;
background-color: none;
cursor: pointer;
}
.menu{
position: absolute;
right:-300px;
top:-18px;
z-index: 1;
width: 250px;
height: 400px;
background-color: #636363;
list-style-type: none;
border-radius:25px;
}
#menuLinks{
/*display:inline;*/
font-size: 15px;
color: white;
font-size:35px;
margin-right: 10px;
margin-top: 20px;
background-color:none;
}
JQUERY
var main = function() {
$('.menuButton').click(function() {
$('.menu').animate({
right: "10px"
}, 200);
});
};
$(document).ready(main);
It's about your #header having a negative z-index. It's "hidden" behind the body which results in you not being able to actually click the .menuButton.
Longer explaination: Giving the menu button a higher z-index than one of its parent elements (in this case, the #header) doesn't have any effect - it will still compete successfully with other descendants of the #header but it will not be displayed on top of the #headers parents or siblings. The #header's z-index will be the "dominant" one.
See also: stacking context as referred by #ajp15243 in the comments.
var main = function() {
$('.menuButton').click(function() {
$('.menu').animate({
right: "10px"}, 200);
});
};
$(document).ready(main);
#header{
position: relative;
background-color:#636363;
width: auto;
height: 106px;
z-index: 0;
}
#logoImg{
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
.menuButton{
position: absolute;
right: 10px;
top: 20px;
z-index: 5;
background-color: none;
cursor: pointer;
}
.menu{
position: absolute;
right:-300px;
top:-18px;
z-index: 1;
width: 250px;
height: 400px;
background-color: #636363;
list-style-type: none;
border-radius:25px;
}
#menuLinks{
/*display:inline;*/
font-size: 15px;
color: white;
font-size:35px;
margin-right: 10px;
margin-top: 20px;
background-color:none;
}
<html>
<head>
<title>Mrs. Rogers Math</title>
<link type="text/css" rel="stylesheet" href="mrm2.css"/>
<!--LINK TO JQUERY & FILE-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="header">
<img id="logoImg" src="http://www.mrsrogersmath.net/SVG_logo_2.png" alt="logoImg">
<img class="menuButton" src="http://www.mrsrogersmath.net/menuButton.png" alt="menuButton">
<ul class="menu">
<li id="menuLinks">Home </li>
<li id="menuLinks">Math Fun </li>
<li id="menuLinks">Helpful Links </li>
<li id="menuLinks">Contact Me </li>
</ul>
</div>
<script>document.write(jQuery.now());</script>
</body>
</html>
here, fixed for you.