I've been trying like crazy to make this happen but I just can't figure it out ( beginner ).
As you can see, when you scroll down, the top head part will stick to the top of the page but also overflow a bit. This is done with stickyjs. I want to do the same thing with the bottom of the head as well, after scrolling a bit for it to "sink" a few pixels while sticking to the bottom of the page, so there's more visibility, but no matter what I try, it just won't work.
If anyone could help, I'd be thankful.
Here's the code on the top part:
#head {
z-index:101;
display: block;
position: absolute;
bottom: 20%;
width:100%;
margin:0 auto;
right:0;
left:0;
height:85px;
background: url(../float.png) #fff 50% 50% no-repeat;
text-indent:-9999px;
overflow:hidden;
}
Here's the code for the bottom part:
#footerhead {
z-index:100;
position:fixed;
left:0px;
bottom:0px;
margin:0 auto;
height:20%;
width:100%;
background:url(../footer.png) #fff 50% 0 no-repeat;
}
And here's the stickyjs that makes it stick:
<script>
$(document).ready(function(){
$("#head").sticky({topSpacing:-70});
});
</script>
Please help me out. :(
You can use the jQuery .scroll() function to achieve what you're trying to do. Here's a little code that I've created which would work perfectly for you:
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$("#footerhead").css("height","5%");
} else if ($(this).scrollTop() < 500) {
$("#footerhead").css("height","20%");
}
});
What happens is that if the user scrolls down 500px on your website, the height of the #footerhead div reduces to 5% thus hiding a larger part of the face and making the content area more visible. Next when the user scrolls back up, the height of the #footerhead div increases back to 20%. You can also set the value of scroll from 500px to any other value of your choice.
This may work for you:
<!doctype html>
<html>
<head>
<title>Sticky Bottom</title>
<style type="text/css">
#head {
z-index:101;
position: relative;
height:85px;
width: 100%;
background: none green;
}
#footerhead {
z-index:100;
position:relative;
height:85px;
width: 100%;
background: none red;
}
.is-sticky #footerhead {
position: fixed;
top: auto !important;
bottom: -10px;
left: 0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://path_to/jquery.sticky.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#head").sticky({topSpacing:-10});
$('#footerhead').sticky();
});
</script>
</head>
<body>
<div id="head">
HEAD
</div>
<div id="footerhead">
FOOTERHEAD
</div>
<div id="content">
<p>Content here..</p>
</div>
</body>
</html>
Could be jsticky error, but I see it adds top: -10px to each sticky element. Please note, the element becomes sticky and gets class is_sticky only after you scroll down the element (it cannot stay in footer).
Related
I'm trying to do an effect that hide a div behind other like this page: Canalla Agency. I use two divs and the last one with position fixed, and it's worked, but the div lost the height.
Sorry for my explanation but I'm not good in CSS positioning and Javascript. I hope you can help me and see you soon. Thanks.
Solution with three <div>'s:
The only tricky bit is the "viewer" div creates the scrolling space to see the background div.
No JS required!
Also remember to specify position when using z-index.
<html>
<style>
#cover, #viewer, #background {
box-sizing: border-box;
position: relative;
padding-top: 50vh;
text-align: center;
height: 100vh;
width: 100%;
}
#cover {
background-color: paleturquoise;
z-index: 1;
}
#viewer {
z-index: -1;
}
#background {
background-color: coral;
position: fixed;
top: 0;
left: 0;
}
</style>
<body>
<div id="cover">
<h1>This Scrolls Up</h1>
</div>
<div id="viewer"></div>
<div id="background">
<h1>This Stays Static</h1>
</div>
</body>
</html>
im making one that is fixed with page(position fixed), but it should fix in the top of the page always while scrolling
like this site -
http://www.simplilearn.com/project-management/pmp-certification-training
in this site drop as query form that is sticking always top while scrolling down , initially its in the middle , after reaching that position it will stick into top untill the page ends scrolling
here is my code of style
.right-tab {
position: fixed;
background-color: red;
z-index:100;
top:0;
left:0;
}
here is my body
<div >
<h1>Sample This
Will go up while scrolling </h1>
</div>
<div class="right-tab">
<h1>Sample This Will not go up while scrolling </h1>
</div>
https://jsfiddle.net/5ADzD/743/
https://jsfiddle.net/5ADzD/743/embedded/result/
<div class="long">Long Div to enable scrolling</div>
<div id="container">
<div id="navwrap">NAV WRAP</div>
</div>
JAVA SCRIPT
function fixDiv() {
var $div = $("#navwrap");
if ($(window).scrollTop() > $div.data("top")) {
$('#navwrap').css({'position': 'fixed', 'top': '0', 'width': '100%'});
}
else {
$('#navwrap').css({'position': 'static', 'top': 'auto', 'width': '100%'});
}
}
$("#navwrap").data("top", $("#navwrap").offset().top); // set original position on load
$(window).scroll(fixDiv);
STYLES
#container {
padding: 1000px 0 2500px;
}
#navwrap{
width: 100%;
height: 50px;
background-color: #C00;
}
.long {
background-image: linear-gradient(top, #eee, #aaa);
background-image: -moz-linear-gradient(top, #a00, #000);
color: white;
height: 2000px;
padding-top: 50px;
}
Please use following css
.right-tab {
position: fixed;
background-color: red;
z-index:100;
top:0;
}
you missed the position where you want it to be fixed
.right-tab {
position: fixed;
background-color: red;
top:0;
left:0; // change the axis with your values
}
use z-index too:
.right-tab {
position: fixed;
background-color: red;
z-index:100;
top:0;
}
jsfiddle
No need for two separate DOM objects (i.e your right-tab class). Just use one element and use javascript/jQuery to make it fixed when it's time. Check for the window scroll position and the elements posiion, and when the critera is met:
$(window).scroll(function(){
if(window.pageYOffset >= $('.right-tab').position().top)
// Add fixed styling to your .right-tab element here to make it fixed
else
// Remove the fixed styling
I am trying to a fixed header on top of the page. So when the user scroll down, the header stay up on top. However this is only work in Chrome, FireFox and Opera which scrolls smoothly.
If you have a look the code below. Open with IE and Google Chrome. You will see the difference! The header must stay in the wrapper.
Example Code
I would like to know how to make the scrolling smooth when repositioning objects inside the div elements when set to absolute to keep it floating at the top of the box.
HTML:
<div id="wrapper">
<header>
<h2>Title Header</h2>
</header>
Content page
</div>
CSS:
#wrapper{
height:200px;
overflow-y:scroll;
position:relative;
}
#wrapper > p {
position: absolute;
z-index: 0;
}
#wrapper header {
background-color:#ccc;
position: absolute;
z-index: 10;
display: block;
top: 0px;
padding:10px;
width: 100%;
}
#wrapper header h2 { margin:0 }
Javascript:
$(function(){
$('#wrapper').scroll(function(e){
$('header').css('top',parseInt($('#wrapper').scrollTop())+'px');
});
});
I'd rather use this CSS and remove the JS for cross-browser compatibility:
// same CSS...
#wrapper p {
margin-top: 50px; //no positioning just a top margin
z-index: 0;
}
#wrapper header {
background-color:#ccc;
position: fixed; // from absolute to fixed
z-index: 10;
display: block;
top: 0px;
padding:10px;
width: 100%;
}
//same CSS...
Demo.
The page I have got is like this: .
I wanted to make it centralized but I couldnot do that.
The problems are:
I want to give black div full page.
I want to centralize other two divs without using left property in css.
While hovering the value of z should increase by any value so that the whole div can come up.
I learned about margin: 0 auto o auto; property that it centralizes the element with respect to page.
I want to get the same for yellow and green divs using margin property w.r.t. black divs.
Can I get these results using CSS or i will have to use Javascript etc?
My html code is here:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styling.css"/>
</head>
<body>
<div class="first">
<center> The first link </center>
</div>
<div class="second">
<center> The second link </center>
</div>
<div class="third">
<center> The third link </center>
</div>
</body>
<html>
My css document is:-
.first
{
position: absolute;
width:500px;
color:#fff;
height:200px;
background-color:#000;
z-index: 0;
margin:0 auto 0 auto;
}
.second
{
width:400px;
position: absolute;
height:200px;
background-color: green;
left:60px;
z-index: 1;
margin:50px auto 0 auto;
}
.third
{
position: absolute;
width:300px;
height: 200px;
left:100px;
background-color:yellow;
z-index: 2;
margin:100px auto 0 auto;
}
body div:first-child a:hover
{
font-size:30px;
color:yellow;
z-index:5;
}
body div +div a:hover
{
font-size:40px;
color:red;
z-index: 5;
}
body div+div+div a:hover
{
font-size:50px;
color:#fff;
z-index:5;
}
I apologize for my English.And hope you will get my problems.
I still believe that using left is the best way to solve your problem — not sure why OP wants to avoid it.
Here is the proof-of-concept fiddle: http://jsfiddle.net/teddyrised/YqDL5/
Instead, use the following trick: set their position from the left by 50% of the container's/parent's width. That's half correct. However, we also need to take into account the width of the element itself, which means we have to offset it backwards by half of its own width.
Use this:
.second, .third {
left: 50%;
transform: translateX(-50%);
}
There are also some changes you have to make to your HTML code:
I would suggest wrapping everything around a parent container that is relatively positioned, and instead of using margins to offset the second and third div from the top, use top instead.
Remove <center>. Delegate layout to CSS, and this HTML tag has been deprecated long time ago.
Here is the revised HTML:
<section>
<div class="first">The first link </div>
<div class="second"> The second link </div>
<div class="third"> The third link </div>
</section>
Also, I suggest setting the first div to relative positioning, so it will not cause the parent element's height to collapse. Otherwise, you will have to set an explicit height since absolute positioning takes elements out of the flow, and the parent will not take it into account when calculating its own dimensions.
section {
position: relative;
}
.first {
width:100%;
color:#fff;
height:200px;
background-color:#000;
}
.second, .third {
left: 50%;
transform: translateX(-50%);
}
.second
{
width:400px;
position: absolute;
height:200px;
background-color: green;
top: 50px;
z-index: 1;
}
.third {
position: absolute;
width:300px;
height: 200px;
top: 100px;
background-color:yellow;
z-index: 2;
}
See fiddle at: http://jsfiddle.net/teddyrised/YqDL5/
I'm trying to create a fixed layout, with the sidebar's background extend to the far right. I drew a sketch to illustrate the image:
how would I go about extending the sidebar background to extend till the end of the right screen, on any window size? I tried with:
#sidebar {
z-index: 1000;
overflow: hidden;
position: absolute;
width: 100%;
background: url(../img/sidebar-base.png) no-repeat 0 -8px;
min-height: 200px;
&::after {
content: '';
z-index: 10;
display: block;
height: 100px;
overflow: hidden;
width: 100%;
background: url(../img/sidebar-rx.png) repeat-x 0 -9px;
position: absolute;
top: 0;
}
}
but a scroll would appear horizontally, and if I apply overflow:hidden on the body I wouldn't be able to scroll to the bottom. Thank you!
EDIT: I did try to find my luck with javascript but there's still a little scroll:
$(function(){
$sidebar = $('#sidebar');
$sidebar.css({width: window.innerWidth - ($sidebar.offset().left)})
});
If your problem lies only in the scrolling, you can easily fix this with this line
overflow-x: hidden;
and applying it to the background's parent or the body element altogether.
Is there anyone following here or not? anyway, I think you should static position and hidden overflow like below:
#sidebar {
z-index: 1000;
overflow: hidden;
position: static;
width: 100%;
height:100%;
right:0;
top:0;
margin:0;}
Also to hide the scrolls, you should hide your body overflow too.
Hope to be right and helpful...
Set body to 100%
body {
height: 100%;
}
Then set the sidebar height to "height: auto;". That will make it extend to the height of the viewport. From there, add fixed positioning like you said.
You could do:
overflow-y:hidden
That should get rid of the scroll bar across the bottom.
I would also then use a lot of right hand padding in the sidebar to extend it out.
Try setting the sidebar width to 30% and the content to 70%.
What you should do is create a wrapper div.
<div class="sidebar-parent">
<div class="sidebar"><!-- Stuff Here --></div>
</div>
Your document should look like this when finished:
<html>
<head>
<title>Experiment</title>
<style type="text/css">
.content {float: left; width: 49%; height: 500px; border: 1px solid #000;}
.sidebar-parent {float: left; width: 50%; background-color: green;}
.sidebar {width: 500px; height: 500px; border: 1px solid #000;}
</style>
</head>
<body>
<div class="content">blah blah blah</div>
<div class="sidebar-parent">
<div class="sidebar"><!-- Stuff Here -->blah blah blah</div>
</div>
</body>
</html>
The main thing to remember is the container div "sidebar-parent" is what's getting the width and containing the background.
To center them you'll need width: 50%; parent containers for both content and sidebar. You make those float:left; to fill the screen and then the content child container float: right; and the sidebar child container float: left; within their parent containers.
Summary: 2 50% width containers each containing 1 child container. Stack the parents together with a left float and then position the fixed width child containers within their parents.
That will center them and now you'll have the ability to have extended backgrounds.