I have been reading about fixed div's within relative and absolute div's here:
Fix position of div with respect to another div
Fixed positioned div within a relative parent div
Fixed position but relative to container
And many other but none can help me to achive a behavior I have seen in few pages (blogs). I can not remember one at the moment, but here are some images to explain
View 1 & View 2
After scrolling down, the contextual menu sticks to the side of the view and moves down with the scrolling until reach the end of the section in which it stops. If there is more content after it, you can keep scrolling down but the contextual menu no longer follow your view. The same going up, you reach the section, the contextual menu follows you up until the start of the section, then stops and you can keep scrolling up.
Is this posible with only HTML and CSS or do I need a plugin?
Here is a jsFiddle piece of code, perphaps incomplete. Forgot to mention, I'm doing this in Angular 6+ as a component, so I don't have full access to the index.html file with the body tag. The jsFiddle shows what I can work with.
There were a few things going on:
You can set body { position: relative } in your CSS
position: sticky needs a full height column to work. Because your col-6 that was holding your menu was only as tall as it needed to be, it won't scroll.
I moved the p-sticky class to your column.
sticky also needs a top value to know where the element should stick to once it becomes sticky.
.p-sticky {
position: sticky;
top: 60px;
}
body {
position: relative;
}
/*some attemps*/
.p-relative {
position: relative;
}
.p-absolute {
position: absolute;
}
.p-sticky {
position: sticky;
top: 60px;
}
.p-fixed {
position: fixed;
}
/* Standar CSS*/
.navbar {
background-color: blue;
width: 100%;
}
.nav-fixed {
top: 0px;
z-index: 1;
position: fixed;
}
.content-ex1 {
height: 200px;
background-color: green;
}
.content-ex2 {
height: 500px;
background-color: #aaaaaa;
}
.menu {
height: 50px;
background-color: red;
}
<div class="navbar">
some navbar things
</div>
<div class="navbar nav-fixed">
some navbar things
</div>
<div class="content-ex1"> Some content here</div>
<div class="container">
<div class="row">
<div class="col-sm-6 p-sticky">
<div class="menu">menu or something</div>
</div>
<div class="col-sm-6 content-ex2"> Some content here</div>
</div>
</div>
<div class="content-ex1"> Some content here</div>
Here's the fiddle to play around with (which includes your bootstrap):
http://jsfiddle.net/w4mz9dte/
Note: you appear to be using an old version of BootStrap. You may want to update to the newest version. In that case, only a few things will change - namely, you move the p-sticky class to the menu.
Here's the newest version of BS 4.4: http://jsfiddle.net/kamr0bjw/
body {
position: relative;
}
/*some attemps*/
.p-relative{
position:relative;
}
.p-absolute{
position:absolute;
}
.p-sticky{
position:sticky;
top: 60px;
}
.p-fixed{
position:fixed;
}
/* Standar CSS*/
.navbar{
background-color: blue;
width:100%;
}
.nav-fixed{
top: 0px;
z-index:1;
position:fixed;
}
.content-ex1{
height:200px;
background-color: green;
}
.content-ex2{
height:500px;
background-color: #aaaaaa;
}
.menu{
height:50px;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js"></script>
<div class="navbar">
some navbar things
</div>
<div class="navbar nav-fixed">
some navbar things
</div>
<div class="content-ex1"> Some content here</div>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="menu p-sticky">menu or something</div>
</div>
<div class="col-sm-6 content-ex2"> Some content here</div>
</div>
</div>
<div class="content-ex1"> Some content here</div>
Related
I have 3 questions about my jQuery study today.
Why my jQuery code not have the animation effect as it should be? for example, .slideUp() and .slideDown(), my code shows something strange instead of slideUp animation.
I understand, the .hide() or .slideUp() function is only to HIDE the div box, not DELETE them, however, in my code, why the position of other div boxes changed after a DIV .hide()? Shouldn't it stay at their original position as the DIV box is still there, just HIDED?
How can I achieve to let other DIVs stay at the original position, when one DIV box has been hided?
$(document).ready(function() {
$('#panel1').slideUp(1000).delay(1500).slideDown(1000);
});
.panel {
display: inline-block;
width: 80px;
height: 60px;
border: 1px solid green;
position: relative;
top: 20px;
margin-left: 45px;
border-radius: 5px;
}
.panelTop {
height: 30px;
background-color: blue;
color: white;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="panels">
<div id="panel1" class="panel">
<div class="panelTop">#panel1</div>
<div class="panelBottom">content</div>
</div>
<div id="panel2" class="panel">
<div class="panelTop">#panel2</div>
<div class="panelBottom">content</div>
</div>
<div id="panel3" class="panel">
<div class="panelTop">#panel3</div>
<div class="panelBottom">content</div>
</div>
<div id="panel4" class="panel">
<div class="panelTop">#panel4</div>
<div class="panelBottom">content</div>
</div>
</div>
For your first question
Why my jQuery code not have the animation effect as it should be? for
example, .slideUp() and .slideDown(), my code shows something strange
instead of slideUp animation.
The .slideUp() method animates the height of the matched elements. Means it animates height so it reaches 0 (or, if set, to whatever the CSS min-height property is). See here for reference. That is exactly what is happening to your first box it is decreasing in height.
Afterwards the display style property is set to none to ensure that the element no longer affects the layout of the page.
What display none does ?
display:none means that the tag in question will not appear on the
page at all
Now for second and third question
I understand, the .hide() or .slideUp() function is only to HIDE the
div box, not DELETE them, however, in my code, why the position of
other div boxes changed after a DIV .hide()? Shouldn't it stay at
their original position as the DIV box is still there, just HIDED?
How can I achieve to let other DIVs stay at the original position,
when one DIV box has been hided?
The .hide() and .slideUp()function they both add display:none to your tag element. Means they are gone now
Now what can you do to let them stay there, But hidden from view ?
You can use visibility or opacity property instead rather than using display
property.
For example: visibility: hidden; will just hide it from the view.
Will update your fiddle in order to demonstrate it in a while. Hope this will help you. Please feel free to ask if not clear. Thank you.
$(document).ready(function() {
setInterval(function(){
$('#panel1').slideUp(1000).delay(500).slideDown(1000);
}, 3000);
});
.outer-div
{
position: relative;
display: inline-block;
min-height: 1px;
margin-right: 15px;
margin-left: 15px;
width: 130px;
height: 90px;
}
.panel {
border: 1px solid green;
margin-left: 45px;
border-radius: 5px;
position:absolute;
top:0;
width: 100%;
}
.panelTop {
height: 30px;
background-color: blue;
color: white;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="panels">
<div class="outer-div">
<div id="panel1" class="panel">
<div class="panelTop">#panel1</div>
<div class="panelBottom">content</div>
</div>
</div>
<div class="outer-div">
<div id="panel2" class="panel">
<div class="panelTop">#panel2</div>
<div class="panelBottom">content</div>
</div>
</div>
<div class="outer-div">
<div id="panel3" class="panel">
<div class="panelTop">#panel3</div>
<div class="panelBottom">content</div>
</div>
</div>
<div class="outer-div">
<div id="panel4" class="panel">
<div class="panelTop">#panel4</div>
<div class="panelBottom">content</div>
</div>
</div>
</div>
You should use display:flex on .panels, that solves your first question.
For second question you should use visibility or opacity.
With current code you are removing it, although it is called hide() it is equivalent to CSS display:none; which doesn't keep space of element.
Although you actually don't need to set visibility in your case because sliding it up will hide element and down show.
Something like this:
$('#panel1').animate({
top: -62 // 60 is height of element plus 2px of borders
}, 1000).delay(1500).animate({
top: 0
}, 1000);
Also you have to change CSS a bit.
Add this to your CSS:
.panels {
display: flex;
overflow: hidden;
margin-top: 20px;
}
And from .panel remove top: 20px;
Full example is here https://jsfiddle.net/_jakob/cphptby3/1/
I have a problem with slider controls and any block with position: absolute on slider section.
$(document).ready(function() {
$('#fullpage').fullpage();
});
.slide {
text-align: center
}
.section {
text-align: center;
}
.absolute {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50px;
text-align: center;
background: red;
z-index: 2;
}
.slide1 {
background: #cccccc;
}
.slide2 {
background: #C3C3C3;
}
.section2 {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.fullpage/2.5.9/jquery.fullPage.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.fullpage/2.5.0/jquery.fullPage.min.css" />
<div id="fullpage">
<div class="section section1">
<div class="absolute">position: absolute</div>
<div class="slide slide1"> Slide 1 </div>
<div class="slide slide2"> Slide 2 </div>
</div>
<div class="section section2">Some section</div>
</div>
If you slide down and up - everything is ok. But if you use slider and then will slide down and up. The page will show without slider controls(and absolute block).
I can't find why it is happening. Problems occurs only in Chrome and Opera.
UPDATES:
Here is jsfiddle for example: https://jsfiddle.net/nfL5w9yL/1/
Fullpage adds z-index:1 to fp-slides
Had the same issue recently, i don't know if you found a solution, but my solution was to remove z-index from fp-slides!
the weird part is that in my case the navigation buttons were not affected, only my position absolute div
I have two Div's next to each other, wrapped in a container Div which has the display:flex-attribute. Now I have this kind of tricky issue where I need to be able to click on one element inside the div which then shows a previously hidden div, which also is placed inside the container. When the hidden div is visible, the container of course expands BUT I need the container NOT to expand and I cannot place the hidden div outside the container. I have the following example code:
HTML:
<div id="container">
<div class="content">
<div class="top">
This is the top
</div>
<div class="bottom">
This is the bottom - click me
</div>
<div class="expand">
This is hidden content
</div>
</div>
<div class="content right">
This is the right content
</div>
</div>
The CSS:
#container {
width: 100%;
display: flex;
}
.content {
float: left;
width: 49%;
border: 1px solid;
}
.top, .bottom {
height:100px;
}
.top {
background: #ddd;
}
.bottom {
background: #eee;
}
.right {
background: #e9e9e9
}
.expand {
display:none;
background: #999;
}
I have made JSFIDDLE - So the hidden div should be outside the container when its visible - can someone help me out?
adding position: absolute; to the .expand div pushes the div outside of the box
https://jsfiddle.net/4724m90k/
what I'm trying to do is simple to tell. There is fixed div on my page on bottom. It must be always shown on bottom, so position fixed is used.
In this div there are 2divs, one small must be always on top of this fixed div, another must be scrollable.
The problem is small div, if I give him position fixed, it is position to top of window, not on top of this fixed div, as you can see in this fiddle
If small div is position absolute, it is on top of fixed div, but if it is scrolled, as you can see in this fiddle
HTML
<div class="bottom">
<div class="top"></div>
<div class="content"></div>
</div>
CSS
.bottom
{
padding:20px;
height: 253px;
position: fixed;
bottom:0px;
width:100%;
background-color: red;
overflow-x: hidden;
overflow-y: scroll;
}
.top
{
height:50px;
width:100%;
background-color: yellow;
position: fixed;
top: 0px;
}
.content
{
height: 1500px;
background: linear-gradient(green, blue);
}
Is is possible to make this work without watching scrolling by jvascript? By pure CSS?
You can use a wrapper <div> for the content and let it scroll - so that the absolutely positioned sibling does not scroll along with it, as follows:
HTML
<div class="bottom">
<div class="top"></div>
<div class='contentWrap'>
<div class="content"></div>
</div>
</div>
CSS
.contentWrap{
height:100%;
overflow-y:auto;
}
* {
margin: 0;
padding: 0;
}
.bottom {
padding: 20px;
height: 253px;
position: fixed;
bottom: 0px;
width: 100%;
background-color: red;
overflow: hidden;
}
.top {
height: 50px;
width: 100%;
background-color: yellow;
position: absolute;
top: 0px;
}
.contentWrap {
height: 100%;
padding-top: 30px; /* .top height - .bottom padding*/
overflow-y: auto;
}
.content {
height: 1500px;
background: linear-gradient(green, blue);
}
<div class="bottom">
<div class="top"></div>
<div class='contentWrap'>
<div class="content"></div>
</div>
</div>
JSFiddle Demo
Your approach using fixed -> absolute is absolutely correct since you can position an element absolute but relative to its parent by doing so. The problem is that the absolute .top always appears on top of .bottom - so if .bottom is scrolled, .top will follow.
My solution would be using position:fixed; on .top, but using bottom instead of top:
.top {
....
position:fixed;
bottom:253px; /*note sure how it should look at the end, try it yourself*/
}
Add div with class top inside div with class content and remove top:0 from .top class:
html
<div class="bottom">
<div class="content" >
<div class="top"></div>
</div>
<div>
css
.top
{
height:50px;
width:100%;
background-color: yellow;
position: fixed;
}
fiddle
Try this, it basically just puts a frame container around your scrollable div to keep everything in place. JSFiddle
<div class="bottom">
<div class="top"></div>
<div class="scroll-container">
<div class="content" ></div>
</div>
<div>
.scroll-container
{
height: 203px;
overflow-y: scroll;
}
Also, remove overflow-y: scroll; from the .bottom class
If you already dealing with fixed heights & positions, why not just position the 'top' section as fixed as well? check the Fiddle Demo
like so:
.top
{
height:50px;
bottom:243px;
width:100%;
background-color: yellow;
position: fixed;
}
At my Page there are tow sections, a header div and the contents div. I want JS or jquery solution to stick the header section at the top, so that when user scrolls the contents section would cross and cover the header section.
html:
<div id="header">
<h3>I'd like to stick here at the background, please! </h3>
</div>
<div id="content">
<h3>I'd like to cross over the header when user scrolls.</h3>
</div>
http://jsfiddle.net/KNh46/
Update: misunderstood, so you want the content to scroll over the header, not under. Then it should be like:
#header {
position: fixed;
height: 100px;
top: 0;
z-index: 100;
}
#content {
position: relative;
margin-top: 100px;
z-index: 101;
}
See an example here: http://jsfiddle.net/aorcsik/v7zav/
If your header is fixed height, say 100px, then:
#header {
position: fixed;
height: 100px;
top: 0;
}
#content {
margin-top: 100px;
}
This way when scrolled to the top, the header won't overlay the content, but when you start to scroll down, it will.
Something like this, if I understand your question:
<div id="content_wrapper" style="position:relative">
<div id="header" style="z-index:1; position:absolute; top:0px">
<h3>I'd like to stick here at the background, please! </h3>
</div>
<div id="content" style="z-index:5">
<h3>I'd like to cross over the header when user scrolls.</h3>
</div>
</div>
I'm using https://github.com/bigspotteddog/ScrollToFixed on my projects with no problems. ScrollToFixed allows you to set when the div will be fixed based on the scroll position.
fiddle with example: jsfiddle.net/ZczEt/167/
you should add css:
*{margin:0;padding:0}
#header{
position:fixed;
width:100%;
height:200px;
background:#ccc;
}
h3{
text-align:center;
}
#content{
background:#f1f1f1;
padding-top:200px;
min-height:500px;
}
jsfiddle
I myself came with another solution :
add another container div to the header and then position that div to fixed, and make the contents to be absolute. but this way you need to specify a min-height or height for the header:
http://jsfiddle.net/pna54/
<div id="header">
<div class="container">
<h3>I'd like to stick here at the background, please! </h3>
</div>
</div>
<div id="content">
<h3>I'd like to cross over the header when user scrolls.</h3>
</div>
css:
div{margin:0;padding:0}
h3{
padding:0;margin:0;
padding-top: 100px;
padding-bottom:100px;
text-align:center;
}
#header{
background:#ccc;
min-height:200px;
width:500px;
position:relative;
}
.container{
position:fixed;
width:100%;
max-width:500px;
}
#content{
background:#f1f1f1;
min-height: 500px;
position: absolute;
width:500px;
}
http://jsfiddle.net/pna54/