My question is about placing a div with position: fixed inside of a div with position: static.
I have a few websites where I fix the header to the top of the window. I also have a parallax effect. I used javascript to allow me to add a class to the header so that it shrinks and changes the opacity on scrolling.
Here's the javascript, layout, and CSS:
$(function () {
$("#Page").scroll(function () {
if ($("#Page").scrollTop() > 0)
$("#header").addClass("scrolled");
else
$("#header").removeClass("scrolled");
});
});
<div id="Page">
<div id="pre-header"></div>
<header id="header" class="">
<div class="page-width">
<div class="logo"></div>
<nav class="navigation-bar"> </nav>
</div>
</header>
</div>
#Page {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 100mm;
perspective-origin: top right;
position: static;
}
#header {
padding-top: 34px;
padding-bottom: 34px;
background-color: rgba(255, 255, 255, 0.2);
height: 110px;
position: fixed;
width: 100%;
margin-top: 36px;
z-index: 1;
pointer-events: none;
transition: background .8s;
}
My problem is that I need the header to still float at the top, even after Page has been scrolled.
Thanks for your help.
Related
I created my custom modal with position: fixed and use this modal into content but it's not applied with respect to screen its shows position: fixed with respect to content How can I make modal in the center with respect to screen center?
modal is imported into the content.
where nav position is fixed
sidebar position is fixed
content position is relative
and modal position is already fixed but this fixed position of modal take w.r.t its parent not with body
Problem: Modal takes the fixed position with respect to its parent but I need to apply modal with respect to HTML body tag. Is there any way to apply this?
Can't put modal directly to body because it's created in such a way that where it'll put, it'll automatically used to draw w.r.to body
Also use parent selector
.overlay{
animation: ${fadeIn} 200ms ease-out;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
background-color: ${(props) => props.theme.palette.greyScale[9]};
}
body < parent(body) {
position:relative;
}
does not work.
Here is the structure:
I think the layout is not correct. I suggest the following layout and style.
Put everything inside a container. I have created a jsfiddle with sample layout. Please have a look. Let me know if any queries
.container {
background: lightgray;
width: 100vw;
height: 100vh;
float: left;
display: block;
position: relative;
}
.nav-bar {
widows: 100%;
height:20%;
background: gray;
}
.side-bar {
width:20%;
height: calc(100% - 20%);
float: left;
background: lightblue;
}
.content {
width: calc(100% - 20%);
background: red;
float: left;
height: calc(100% - 20%);
}
.modal {
position: fixed;
width: 200px;
height: 150px;
background: green;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
<div class="container">
<div class="nav-bar">
NavBar
</div>
<div class="side-bar">Side Bar</div>
<div class="content">
Content
<div class="modal">
Modal
</div>
</div>
</div>
<nav>
</nav>
<div class="container">
<div class="wrapper row">
<div class="col-md-3 col-lg-3 left-side">
</div>
<div class="col-md-6 col-lg-6 middle-side">
</div>
<div class="col-md-3 col-lg-3 right-side">
</div>
</div>
</div>
</div>
<footer>
</footer>
CSS code
.wrapper {
width: 100%;
height: auto;
background-color: var(--main-bg2-color);
margin-top: 55.6px !important;
}
.wrapper.row {
margin: 0;
}
.left-side {
width: 10%;
background-color: var(--main-bg2-color);
color: var(--main-text-color);
height: auto;
padding-top: 41px;
padding-left: 0;
position: fixed;
overflow: hidden;
}
.middle-side {
padding-top: 40px;
width: 100%;
background-color: var(--main-bg2-color);
color: white;
height: auto;
overflow: hidden;
margin-left: 14%;
}
.right-side {
padding-top: 40px;
padding-left: 20px;
width: 100%;
background-color: var(--main-bg2-color);
height: auto;
position: fixed;
right: 0;
}
Here I have a container inside it the left-side class and right side class must remain fixed while the middle side class must be scrollable. My issue is that right side class is always on right with respect to the window when I give right:0. I want right-side class must be right:0 with respect to wrapper class
Is there anyway to fix this?
If I get you right, you want the child div to be fixed to it's parent...
in order to do so you have to set the parent to be positioned fixed and then all its children to be positioned absolute.
I'm trying to get the text in the fixed div to change as you scroll past the main divs that contain the images. I tried following the solution in Changing div content based on scroll position but it won't work. Here is my attempt using that method: http://jsfiddle.net/st6q1Lmo/5/.
I'm a beginner so it's hard for me to write code from scratch. I must be doing something wrong... I would appreciate any help. Thank you!
This is my HTML and CSS without any JS (http://jsfiddle.net/7tdnw1eb/6/):
UPDATE: Thanks to the lead #tera_789 gave me, I've almost got it to work. For the first and third div it works, but for the second the content won't update in the fixed div. I know it could be because the video is only 90vh and the video itself won't scroll in the container... However I need it to be 90vh. How can I get around this? jsfiddle.net/7tdnw1eb/12
body {
background-color: #797979;
color: black;
font-family: serif;
font-size: 2vw;
line-height: 1.1em;
}
#about {
padding-bottom: 1em;
}
#wrapper {
max-width: 100vw;
max-height: 100vh;
overflow: scroll;
padding-top: 1em;
padding-bottom: 1em;
}
.project {
background-color: transparent;
width: 100vw;
height: 100vh;
position: sticky;
top: 0;
padding: 0 2em;
overflow: scroll;
}
.content__container {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#count {
color: black;
width: 20%;
display: block;
position: fixed;
top: 0;
right: 0;
padding: 1em 2em 2em 0;
z-index: 99999999999;
}
img {
max-width: 100%;
}
<div id="wrapper">
<div id="count">
<p>1/3</p>
</div>
<div id="about">
Wassup everyone
</div>
<div class="project">
<div class="content__container">
<img src="https://www.what-dog.net/Images/faces2/scroll001.jpg">
</div>
</div>
<div class="project">
<div class="content__container">
<img src="https://static.boredpanda.com/blog/wp-content/uploads/2017/09/funny-dog-thoughts-tweets-1.jpg">
</div>
</div>
<div class="project">
<div class="content__container">
<img src="https://ksrpetcare.com/wp-content/uploads/2017/04/41059-Cute-Yellow-Labrador-puppy-in-play-bow-white-background.jpg">
</div>
</div>
</div>
Take a look at this: onscroll event
On my web page sidebar appears when clicked upon a particular icon.In the sidebar-footer there is a text box whose input runs on a particular php page and output gets printed on sidebar-main. I want to fix the sidebar-header and sidebar-footer relative to sidebar (i.e., when sidebar is active).Only sidebar-main should scroll when content grows. As of now whole sidebar scrolls. Thank you in advance!
#bot {
position: fixed;
bottom: 50;
left: 10;
cursor: pointer;
}
.overlay {
/* full screen */
width: 100vw;
height: 100vh;
/* transparent black */
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
display: none;
/* middle layer, i.e. appears below the sidebar */
z-index: 9998;
}
#sidebar {
width: 350px;
position: fixed;
top: 0;
left: -350px;
height: 100vh;
z-index: 999;
background: linear-gradient(to left, #26a0da, #314755);
color: #fff;
transition: all 0.3s;
overflow-y: scroll;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
#sidebar.active {
left: 0;
}
#dismiss {
position: absolute;
top: 10;
right: 20;
cursor: pointer;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.glyphicon.glyphicon-remove {
font-size: 20px;
}
.overlay {
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
z-index: 998;
display: none;
}
#sidebar .sidebar-header {
width: 350px;
padding: 20px;
top: 0;
background: linear-gradient(to right, #26a0da, #314755);
text-align: center;
position: absolute;
}
#sidebar .sidebar-menu {
width: 350px;
padding: 20px;
text-align: center;
#position: fixed;
}
#sidebar .sidebar-footer {
width: 350px;
padding: 20px;
bottom: 0;
background: linear-gradient(to right, #26a0da, #314755);
text-align: center;
#position: fixed;
<div class="wrapper">
<nav id="sidebar">
<!-- Close Sidebar Button -->
<div id="dismiss">
<span class="glyphicon glyphicon-remove"></span>
</div>
<!-- Sidebar Header -->
<div class="sidebar-header">
<h3>Sidebar-Header</h3>
</div>
<!-- Sidebar Main -->
<div class="sidebar-main">
<div id="result"></div>
<!-- Result comes from javascript part -->
</div>
<!-- Sidebar Footer -->
<div class="sidebar-footer">
<div id="message-box" class="col-md-5 col-md-offset-3">
<input type="text" id="message" name="message" value="" placeholder="Messages" />
</div>
</div>
</nav>
<div id="sidebarCollapse">
<img src="icon2.png" id="bot">
</div>
<div class="overlay"></div>
</div>
You may need to simplify your code to avoid including elements that are not part of the question (like the sidebar's "active" class), as your snippet doesn't actually show anything. Also using a relative path for an image on a snippet doesn't really work.
On the other hand, it is not clear if your sidebar's header and footer are meant to be fixed height or not (or the whole sidebar). In the first case, it can be handled with CSS alone as seen in this snippet.
You may want to add a container for your menu and set a fixed height for that container (screen size - header height - footer height).
HTML
<nav id="sidebar">
<div class="sidebar-header">
<!-- Header content -->
</div>
<div class="sidebar-menu">
<div class="menu-container">
<!-- Menu content -->
</div>
</div>
<div class="sidebar-footer">
<!-- Footer content -->
</div>
</nav>
CSS
#sidebar {
width:350px;
position:fixed;
left:0;
top:0;
height:100vh;
}
.sidebar-header {
height:100px;
position:relative; /* doesn't need to be absolute */
width:100%
}
.sidebar-footer {
height:100px;
position:absolute; /* the footer goes to the bottom */
bottom:0;
left:0;
width:100%
}
.menu-container {
height: calc(100vh - 200px); /* screen height - header height - footer height */
overflow: auto; /* this makes your container div to scroll if the content's overflowing */
}
If you want automatic heights for the footer or header of the sidebar (which I don't recommend), then you should set the sidebar's header and footer height from javascript and then calculate the menu container's height and set it from code.
I want to keep the sticky header to remain at the top of my #main div.
Here is my js fiddle link. Even in responsive mode. I tried below code but its not working.
#import "bootstrap-sprockets";
#import "bootstrap";
#import "font-awesome";
#import "navbar";
body,
html {
height: 100%;
overflow: hidden;
position: relative;
}
body {
padding: 10px;
}
.row-offcanvas {
height: 100%;
padding: 5% 0px 5% 0px;
}
#sidebar {
width: inherit;
min-width: 220px;
max-width: 220px;
background-color: black;
float: left;
height: 100%;
position: relative;
overflow: hidden;
}
#main {
height: 200px;
overflow-y: auto;
overflow-x: hidden;
background-color: white;
}
#sticky {
background-color: green;
}
/*
* off Canvas sidebar
* --------------------------------------------------
*/
#media screen and (max-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
width: calc(100% + 230px);
margin-top: 35px;
}
.visible-xs {
padding-top: 10px;
}
.row-offcanvas-left {
left: -230px;
}
.row-offcanvas-left.active {
left: 0;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
}
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet" />
<div class="row-offcanvas row-offcanvas-left">
<div id="sidebar" class="sidebar-offcanvas">
<div class="col-md-12">
<h2>
Sidebar
</h2>
</div>
</div>
<div id="main">
<div id="sticky">
sticky header
</div>
<div class="col-md-12">
<p class="visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas"><i class="glyphicon glyphicon-chevron-left"></i></button>
</p>
<div class="row">
<h2>
main content
<br/> main content
<br/> main content
<br/>main content
<br/>main content
<br/>main content
<br/>main content
<br/>main content
<br/>
</h2>
</div>
</div>
</div>
</div>
<!--/row-offcanvas -->
Could anyone help me? Appreciate your help in advance.
Thanks
Add below CSS to id #sticky
position: fixed;
width: 100%;
z-index: 99;
While resizing output window - sticky header width is varying. I want to make that stick with main content.I mean the sticky div must fit along with main div.