I'm trying to reveal a page from a specific point in this case the (div:content) further down the page.
Desired effect will have the red block at the top, however scrolling down will reveal the blue block above
UPDATED: http://jsfiddle.net/cr8uj/1/
HTML
<div class="block">
block
</div>
<div class="content">
content
</div>
CSS
body {
margin: 0px;
padding: 0px;
}
.block {
background: blue;
height: 300px;
width: 100%;
position: fixed;
}
.content {
background: red;
margin-top: 300px;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
position: absolute;
}
You are looking for: scrollTop
http://api.jquery.com/scrollTop/
Set the current vertical position of the scroll bar for each of the
set of matched elements.
Example:
$('body').scrollTo('#YourDiv');
There is a question related to this: jQuery scroll to element
A good library: http://mmenu.frebsite.nl/examples/responsive/index.html
Other options:
What you need is the JavaScript window.scrollTo method
window.scrollTo(xpos,ypos)
Insert the div position in there.
Or use the JQuery method ScrollTo, see an example here
$(...).scrollTo( 'div:eq(YourDiv)', 800 );
Related
I'm not sure this is even possible and the only reason I'm asking is because I'm dealing with an existing site that I need to "lightly" modify. So yes, I understand this is bad practice, but I wanted to know if it was at least possible.
If I have a parent DIV with position: fixed; and top: 0;, is it possible to have a child within that DIV which flows relative to the page? (Basically, this child DIV needs to scroll with the page while the parent and its remaining content stays fixed).
I've tried to set the child DIV to every position: possible, but I'm not able to let this child escape its parent.
Current code example.
body {
margin: 0;
height: 2000px;
}
* {
color: white;
}
.parent {
width: 100%;
height: 100%;
position: fixed;
top: 0;
}
.child1 {
background-color: darkgreen;
height: 100px;
width: 100%;
}
.child2 {
background-color: green;
height: 100px;
width: 100%;
}
<DIV class="parent">
<DIV class="child1">
child1 should stay at top during scroll
</DIV>
<DIV class="child2">
child2 should scroll with page (begin to dissappear once the page is scrolled down). What (if anything) can I apply to this child to get this behavior?
</DIV>
</DIV>
Preferably this would be done with only HTML & CSS, but I'm open to hearing alternative methods.
Code change needed for both HTML and CSS. Please run the code snippet and check the desire behavior.
body {
margin: 0;
height: 2000px;
}
* {
color: white;
}
.parent {
width: 100%;
height: 100px;
}
.child1 {
background-color: darkgreen;
position: fixed;
top: 0;
height: 100px;
width: 100%;
}
.child2 {
background-color: green;
height: 100px;
width: 100%;
}
<DIV class="parent">
<DIV class="child1">
child1 should stay at top during scroll
</DIV>
</DIV>
<DIV class="child2">
child2 should scroll with page (begin to dissappear once the page is scrolled down). What (if anything) can I apply to this child to get this behavior?
</DIV>
Let me first try to illustrate the problem
I have a webpage which contains a header and a sidenav. The sidenav is fixed in css, since I don't its content to move when scrolling.
When the page isn't scrolled down it works as intended, somewhat like this
However when I scroll i don't want whitespace on top of the sidenav. Currently when I scroll down the page, it looks somewhat like this
The intended behavior should be something like this
How do I go about this in css? Do I mess with the z-index of the elements? so the sidenav is behind the header when the page isn't scrolled? Or do I dynamically add to the sidenav's size when scrolling?
And how would either of these options be done in css?
As I understand, you have to set z-index of the header higher than the sidenav
Stack Snippet
.header {
height: 100px;
background: #000000;
position: relative;
z-index:999;
}
body {
margin: 0;
}
.sidebar {
position: fixed;
left: 0;
top: 0px;
width: 100px;
background: red;
height: 100%;
padding-top:100px;
}
.content {
height: 1000px;
background: yellow;
}
<div class="header"></div>
<div class="main">
<div class="sidebar"></div>
<div class="content"></div>
</div>
<div class="shouldBeOverlapped">
content
</div>
now I want to add another div on it (e.g. waiting) so it will 100% cover it and make it unclickable, preferably transparented. How to do it?
Try to search for "overlay". This will be the right thing.
Example here:
#overlay {
height: 100%;
width: 100%;
background-color: black;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
}
<div class="shouldBeOverlapped">
content
</div>
<div id="overlay"></div>
You can try to put that waiting div as a :before. Although it is limited, it can be easy to set up.
#textToHide {
background: yellow;
position: relative;
width: 300px;
padding: 10px;
}
#textToHide:before {
content: '';
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
<div id="textToHide">
This text is protected against selection... although we could still look for it in the source code...
</div>
You need a containing div element with it's position attribute set to relative. This defines the bounds of the overlay. Without it the overlay will look up the DOM until it finds a parent it can get it's positioning information from. If it doesn't find one, it will cover the entire page body.
I've created a JSFiddle for you here: https://jsfiddle.net/aogd164t/
Try removing position: relative from the container class and see the result.
I am trying to create a relative-positioned element with overflow:hidden that contains a few fixed-position elements. The goal is to have the fixed child elements become hidden as the parent element moves, sort of like if they were part of a background-image with attachment:fixed on the parent element.
By all accounts on StackOverflow and elsewhere on the web, this is not possible, because a fixed element only regards the browser window and ignores its parent element. However, for whatever reason it actually works as intended in Chrome only: http://jsfiddle.net/x6avvhuf/
Here's what the fiddle looks like, view it in Chrome vs. IE/Firefox to see the difference:
HTML
<body>
<div id = "headwrapper">
I am the relative parent element
<div class = "fixedchild">
I am a fixed child element
</div>
</div>
<div id = "content">
This is the main content portion of the page<br>
<!-- Repeat until the page scrolls -->
This is the main content portion of the page<br>
</div>
CSS
body {
background-color: yellow;
}
#headwrapper {
position: relative;
height: 300px;
width: 100%;
overflow: hidden;
z-index: -1;
background-color: black;
color: white;
text-align: center;
}
.fixedchild {
position: fixed;
width: 75%;
height: 40px;
z-index: 48;
top: 22.5%;
left: 50%;
margin: 0 0 0 -37.5%;
text-align: center;
color: red;
background-color: pink;
}
What is an alternative solution for this? I have read that it is possible to make an absolute element behave like a fixed element with CSS, but I have been unable to make this work so far. Thanks in advance for any help or advice! :)
UPDATE
Sometimes the best solutions are the most simple. Given the code you posted all you would have to do is set a background-color on #content (ex: yellow in this instance to match the body) since your fixed element has z-index: -1 and will sit behind it anyways:
#content{
background: yellow;
width: 100%;
}
CSS EXAMPLE 1
OR
You could set #content to position:relative which would allow you to order this and your fixed div with z-index (this is probably better, using z-index: -1 is kind of a hack):
CSS
.fixedchild {
position: fixed;
width: 75%;
height: 40px;
z-index: 1; //set to 1
top: 22.5%;
left: 50%;
margin: 0 0 0 -37.5%;
text-align: center;
color: red;
background-color: pink;
}
#content{
background: yellow;
width: 100%;
position: relative; //add
z-index: 2; //set higher
}
CSS EXAMPLE 2
(previous answer):
DISCLAMIER: This is not a CSS solution.
There may be a CSS solution for this. I don't happen to know one off the top of my head, but I do know this can be done pretty easily with Jquery
JS
$(window).scroll(function(){
var scrolled = $(this).scrollTop()+100; //offset starting position which I hard coded to top: 100px - you can change as needed
$(".fixedchild").css({"top": scrolled+"px"});
});
CSS
.fixedchild {
position: absolute;
width: 75%;
height: 40px;
z-index: 48;
top: 100px;
left: 50%;
margin: 0 0 0 -37.5%;
text-align: center;
color: red;
background-color: pink;
}
JS EXAMPLE
I am trying to design a layout where i will have header 100px at the top. footer 80px always stick to the bottom of browser screen and an scrollable content area in between header and footer. the vertical scrollbar should come in the content area when i finished writing till the content touches the top end of footer.
Can Anyone suggest me how can i achieve this
Here is what i have tried: JsFiddle
<header>
</header>
<div id="main">
<div id="content">
scrollable content area
</div>
<footer>
footer always appearing bottom of the browser screen
</footer>
</div>
My css:
header {
height: 100px;
width: 100%;
background: #bbb;
}
#main {
background: #ccc;
width: 100%;
height: 100%
}
#content {
position: relative;
height: 100%;
width: 100%;
background: green;
overflow-y: auto;
}
footer {
position: relative;
bottom: 0;
height: 80px;
width: 100%;
background: #aaa;
}
EDITED: FIDDLE
#content {
position: absolute;
height: calc(100% - 180px);
background: green;
overflow-x: hidden;
overflow-y:scroll;
}
I answered a similar question before at: Div height percentage based but still scrolling
Here is one approach.
The HTML:
<header>The Header...</header>
<div id="main">
<div id="content">
scrollable content area
<p>Lorem ipsum dolor sit amet, ...</p>
</div>
</div>
<footer>footer always appearing bottom of the browser screen</footer>
The CSS:
html, body {
height: 100%;
}
body {
margin: 0;
}
header {
height: 100px;
width: 100%;
background: #bbb;
position: absolute;
top: 0;
}
#main {
background: #ccc;
width: 100%;
position: absolute;
top: 100px;
bottom: 80px;
left: 0;
right: 0;
overflow-y: auto;
}
#content {
overflow: auto;
background: green;
}
footer {
position: absolute;
bottom: 0;
height: 80px;
width: 100%;
background: #aaa;
}
The trick is to create an absolutely positioned block container that spans the area between the header and the footer, #main, using the top, bottom, left, right offsets, and apply overflow-y: auto.
The #content will then take up space and eventually trigger the scroll bar on #main.
See demo at: http://jsfiddle.net/audetwebdesign/aNRE9/
You will need to use JavaScript for this unfortunately. No big deal. I've also added the handler for when you resize the window.
var resizeTimer;
window.onload = function(){
makeMiddleFull();
}
window.onresize = function(){
clearTimeout(resizeTimer);
resizeTimer = setTimeout(makeMiddleFull, 100);
}
function makeMiddleFull(){
var cobj = document.getElementById('content');
cobj.style.height = (getDocHeight() - (document.getElementById('header').style.height + document.getElementById('footer').style.height)) + "px";
}
function getDocHeight() {
var D = document;
return Math.max(
D.body.scrollHeight, D.documentElement.scrollHeight,
D.body.offsetHeight, D.documentElement.offsetHeight,
D.body.clientHeight, D.documentElement.clientHeight
);
}
See updated fiddle for full code updates including DOM and CSS here:
http://jsfiddle.net/Qpc2s/2/
Just tell me what you have tried? I don't see any header, any footer, just a text there in the scollable div.
Ok let me guide you a bit.
What you do is simple but would require you to understand the point.
How to make the footer stick to the bottom.
footer {
position: absolute; // position as absolute..
bottom: 0; // margin-bottom as 0
max-width: 80px; // width
margin: 0 auto; // margin..
}
This will make the footer to always stay at the end of the document I mean at the bottom of the page.
How to make header
header {
position: absolute;
top: 0;
max-width: 100px;
margin: 0 auto;
}
How to make a scrollable div
I donot fully understand this one. So I am just going to guide you a bit.
You can create a scrollbar in the content div. You want this:
the vertical scrollbar should come in the content area
You can do that by using this:
div {
max-height: 100px;
min-height: 100px;
}
I will assume that you are going to change the div to the element or class or id to the one you're having.
Making a scrollable div with a scrollbar.
First you will create a div with a max-height, to make the div not exceed the height of the screen. Then you can use a scrollbar like this:
overflow: scroll;
Add this property to the element. This way, you'll have a footer, an header, and a content block which has a scrollbar for it self, not the one that browser has.
Fiddle for this:
http://jsfiddle.net/afzaal_ahmad_zeeshan/aNRE9/2/
I am really sorry but I didn't bother changing the background, but you can see, the header stays there, footer at the end, and the div scrolls! :)
Good luck!