So what Im trying to achieve is to make a div element stick onscroll to nav header element bottom but they are not in the same parent, also the header dissappear onscroll down and re-appear onscroll up
this is the link to codepen
https://codepen.io/snake220/pen/VwdwpwJ
.red-div {
background-color: red;
width: 100%;
height: 50px;
position: sticky;
top: 0;
}
.green-div {
background-color: green;
width: 100%;
height: 400px;
}
.test2 {
width: 100%;
height: 100px;
}
.blue-div {
background-color: blue;
width: 100%;
height: 30px;
}
<nav class="red-div"></nav>
<div class="green-div">
<div class="test2"></div>
<div class="blue-div"></div>
</div>
so like showin in the code I want the blue div to stick under the red div onscroll.
So, you need to set position: sticky and top equal to the red nav height which equal to 50px like top: 50px;
.red-div {
background-color: red;
width: 100%;
height: 50px;
position:sticky;
top:0;
}
.green-div {
background-color: green;
width: 100%;
height: 400px;
}
.test2 {
width: 100%;
height: 100px;
}
.blue-div {
background-color:blue;
width: 100%;
height: 30px;
position: sticky;
top: 50px;
}
<nav class="red-div"></nav>
<div class="green-div">
<div class="test2"></div>
<div class="blue-div"></div>
</div>
Related
I have a div with 15% height (height: 15%;)
I can not put set span button of this div. If I use height: 300px; it works well. but with percent height does not work. why?
#parent {
height: 15%;
position: relative;
}
span {
position: absolute;
bottom: 0;
}
You can fill the height of the body by using 100vh;
body {
height: 100vh;
}
#parent {
position: relative;
width: 15%;
height: 15%;
background-color: red;
}
span {
position: absolute;
color: white;
text-align: center;
width: 100%;
bottom: 0;
}
<div id="parent">
<span>Hello</span>
</div>
I've looked through a dozen other similar questions as this one, but I don't think any of them are similar enough to my scenario. This isn't my exact setup, but I've simplified it to hopefully make it easier to explain and also answer.
I have 3 divs. If the window is wider than 600px, div1 and div2 should flow normally, floated left, and div3 should float to the right. Using a #media query, if the window is narrower than 600px, div 3 should appear above div1 and div2, pushing them down so they're stacked on top of each other.
I've tried experiementing with display and position properties on all 3 divs, and I can't figure out how to make this work. I'm working with a templated system, so I can't add a container. I can only work with these 3 divs.
#id1 {
background: red;
width: 100px;
height: 100px;
}
#id2 {
background: yellow;
width: 100px;
height: 100px;
}
#id3 {
background: blue;
width: 100px;
height: 100px;
float: right;
position: fixed;
top: 50px;
right: 20px;
}
#media only screen and (max-width: 600px) {
#id3 {
float: left;
position: absolute;
top: 0px;
left: 0px;
}
}
<div id="id1">DIV 1</div>
<div id="id2">DIV 2</div>
<div id="id3">DIV 3</div>
Set position: relative and correct top/left/right values:
#id1 {
background: red;
width: 100px;
height: 100px;
}
#id2 {
background: yellow;
width: 100px;
height: 100px;
}
#id3 {
background: blue;
width: 100px;
height: 100px;
float: right;
position: fixed;
top: 50px;
right: 20px;
}
#media only screen and (max-width: 600px) {
#id3 {
float: left;
position: relative;
top: 0;
left: 0;
right: unset;
}
}
<div id="id1">DIV 1</div>
<div id="id2">DIV 2</div>
<div id="id3">DIV 3</div>
To stack the div#id3 on top, you'll need to use position: absolute and set custom top position for all 3 divs:
#id1 {
background: red;
width: 100px;
height: 100px;
}
#id2 {
background: yellow;
width: 100px;
height: 100px;
}
#id3 {
background: blue;
width: 100px;
height: 100px;
float: right;
position: fixed;
top: 50px;
right: 20px;
}
#media only screen and (max-width: 600px) {
#id1,
#id2,
#id3 {
position: absolute;
top: 10px;
float: none;
}
#id1{ top: 110px; }
#id2{ top: 210px; }
#id3{ right: unset; }
}
<div id="id1">DIV 1</div>
<div id="id2">DIV 2</div>
<div id="id3">DIV 3</div>
Please read https://developer.mozilla.org/en-US/docs/Web/CSS/order.
I hope this helps. If you need me to explain it to you, please let me know. I will be glad to.
body {
display: flex;
/* Optional, if you want the DIVs 100% width: */
flex-direction: column;
}
#id1 {
background: red;
width: 100px;
height: 100px;
}
#id2 {
background: yellow;
width: 100px;
height: 100px;
}
#id3 {
background: blue;
width: 100px;
height: 100px;
float: right;
position: fixed;
top: 50px;
right: 20px;
}
#media only screen and (max-width: 600px) {
body > #id3 { order: 1; }
body > #id1 { order: 2; }
body > #id2 { order: 3; }
#id3 {
float: left;
position: relative;
top: 0px;
left: 0px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<div id="id1">DIV 1</div>
<div id="id2">DIV 2</div>
<div id="id3">DIV 3</div>
</body>
</html>
This is the best solution according to me
I just came up with a perfect solution for my needs. Adding a margin-top to div1 in the #media query will bump it and div2 down:
#media only screen and (max-width: 600px) {
#id3 {
float: left;
position: absolute;
top: 0px;
left: 0px;
}
#id1 {
margin-top: 100px;
}
}
I have a div scroll-content that contains another div fixme which I want to fix only when the scroll-content div is at the top of the screen. If user scrolls past the scroll-content div, the fixme should disappear. I am using the code below but it doesn't seem to work:
var fixmeTop = $('.fixme').offset().top;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= fixmeTop) {
$('.fixme').css({
position: 'fixed',
top: '50%',
left: '50%',
display: 'block'
});
} else {
$('.fixme').css({
display: 'none'
});
}
});
body {
height: 3000px;
}
.content {
height: 500px;
background: white;
}
.scroll-content {
background: black;
height: 1000px;
}
.fixme {
background: green;
color: white;
text-align: center;
width: 100px;
height: 100px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="content"></div>
<div class="scroll-content">
<div class="fixme">Scroll here</div>
</div>
This here is an example that uses position sticky to keep the .fixme element inside of the .scroll-content element. It probably didn't work before in your own attempt because of jQuery overwriting the position property with fixed.
I hope that this is the desired effect.
Otherwise let us know so we can help you figure out another solution.
body {
height: 3000px;
}
.content {
height: 500px;
background: white;
}
.scroll-content {
position: relative;
background: black;
height: 1000px;
}
.fixme {
position: sticky;
top: calc(50% - 50px);
left: 50%;
background: green;
color: white;
text-align: center;
width: 100px;
height: 100px;
transform: translate(-50%, 0%);
}
<div class="content"></div>
<div class="scroll-content">
<div class="fixme">Scroll here</div>
</div>
I'm trying to make a navigation bar that overlap my header and stick to the top of the window on scroll.
It will start at top: 45px and stick at top: 0 on scroll.
My first approach was to set it at position: fixed; top: 45px and change the value with JS on a scroll event. But Firefox gave me the warning about "asynchronous panning" discussed on this post.
I have been able to do it with a bit of CSS trickery, but I am wondering if there is a simpler CSS way or a valid JS approach to do this (not throwing a warning).
body {
position: relative;
height: 100%;
width: 100%;
background-color: grey;
overflow-x: hidden;
margin: 0;
}
.container {
position: absolute;
top: 0;
left: -1px;
width: 1px;
bottom: 0;
padding-top: 45px;
overflow: visible;
}
nav {
position: sticky;
top: 0;
transform: translateX(-50%);
margin-left: 50vw;
width: 300px;
height: 70px;
background-color: red;
}
header {
height: 50vh;
background-color: blue;
}
main {
height: 200vh;
width: 100%;
background-color: green;
}
<div class="container">
<nav></nav>
</div>
<header>
</header>
<main>
</main>
You can simplify your code and avoid using an extra container:
body {
background-color: grey;
margin: 0;
}
nav {
position: sticky;
top: 0;
width: 300px;
height: 70px;
margin:45px auto -115px; /* 115 = height + margin-top */
background-color: red;
}
header {
height: 50vh;
background-color: blue;
}
main {
height: 200vh;
background-color: green;
}
<nav></nav>
<header>
</header>
<main>
</main>
I have a container div with a button and a car img inside of it. The car moves when the page is scrolled.
When the mouse is hovering over top of the button or img, the scroll wheel no longer works.
I tried adding a gray overlay div to block the hover on the button and car. But this prevents the button from being clicked.
Is there a way to make scrolling work even when the button or image is hovered?
$('#home').on('scroll', function() {
var dist = $(this).scrollTop();
$('#cars').css('left', dist / 2);
});
body {
position : absolute;
height: 90%;
width: 90%;
background: #fff;
}
#overlay {
height: 1200px;
background-color: rgba(255,255,255,0.7);
z-index: 999;
position: relative;
pointer-events: none;
}
#buttons {
width: 150px;
height: 40px;
background-color: yellow;
position: fixed;
text-align: center;
z-index: 5;
cursor: pointer;
}
#home {
position: relative;
top:0px;
width: calc(100% + 25px);
overflow-y: scroll;
background-image: url('images/movie_6.jpg');
height: 400px;
background-color: #000000;
margin-top: 40px;
}
#homeinner {
height: 1800px;
overflow: hidden;
}
#cars {
height: 50px;
position: fixed;
top: 100px;
left: 0;
}
#bar {
height: 80px;
width: calc(100% + 25px);
position: absolute;
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="home">
<div id="homeinner">
<button id="buttons" onclick="alert('Log in page!')">
button
</button>
<img id="cars" src="http://www.kindaholidays.com/hotel/img/travel_icon/512x512/car.png" />
<div id="overlay">
</div>
</div>
</section>
<div id="bar">
</div>
I think I realize now that your issue is that when the mouse is over top of the button or car image, mousewheel scrolling does not work. This is because the position of those elements is "fixed". I'm not sure if this is a bug or not. Anyways, you can simulate the fixed position with javascript to get around this issue.
$('#home').on('scroll', function() {
var dist = $(this).scrollTop();
$("#buttons").css("top", dist);
$("#cars").css("top", dist + 100);
$('#cars').css('left', dist / 2);
});
body {
position: absolute;
height: 90%;
width: 90%;
background: #fff;
}
#overlay {
height: 1200px;
background-color: rgba(255, 255, 255, 0.7);
z-index: 999;
position: relative;
pointer-events: none;
}
#buttons {
width: 150px;
height: 40px;
background-color: yellow;
position: absolute;
text-align: center;
z-index: 5;
cursor: pointer;
}
#home {
position: relative;
top: 0px;
width: calc(100% + 25px);
overflow-y: scroll;
background-image: url('images/movie_6.jpg');
height: 400px;
background-color: #000000;
margin-top: 40px;
}
#homeinner {
height: 1800px;
overflow: hidden;
}
#cars {
height: 50px;
position: absolute;
top: 100px;
left: 0;
}
#bar {
height: 80px;
width: calc(100% + 25px);
position: absolute;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="home">
<div id="homeinner">
<button id="buttons" onclick="alert('Log in page!')">
button
</button>
<img id="cars" src="http://www.kindaholidays.com/hotel/img/travel_icon/512x512/car.png" />
</div>
</section>
<div id="bar">
</div>