I am trying to create a 'back to top' image, it needs to stick to the bottom right corner of the page.
I have created the div with the image but I do not know what is the best way to make it permanently stay at the bottom of the page. Is it best to use absolute positioning?
Also, I want the div to only appear when the user has scrolled past a certain point, and to fade in (or something similar?)
I have looked online but can't find anything that does what I want. I tried simply getting the div to stick to the bottom but the tutorials I have been using show how to create footers, rather than just one small graphic, so it doesn't work as well.
What are the best practices for this? Any help appreciated!
How about this:
http://jsfiddle.net/uRN64/1
HTML
<div id="log" style='display:none; position:fixed; bottom:0px; right:0px; width:200px background-color:red;'>Back To Top</div>
<div style='height:1200px; background-color:orange'>Try Scrolling me</div>
JS
$(function(){
$(window).scroll(function() {
$('#log').toggle($(document).scrollTop() > 100);
});
})
To fade:
Change: $('#log').toggle($(document).scrollTop() > 100); to
$(document).scrollTop() > 100 ? $('#log:hidden').fadeIn() : $('#log:visible').fadeOut();
Let say you have a div
<div class="bottom">Your Img</div>
Apply fixed position to the div as we want the div to appear fixed.
By doing so we can freely move the div to our desired area.
Then by applying CSS property right:0; and bottom:0; we can move the div to the right most and the bottom most position on the page.
HTML:
<div class="bottom"></div>
CSS:
.bottom
{
width:100px;
height:30px;
background-color:Gray;
border:1px solid black;
position:fixed;
right:0;
bottom:0;
}
Here is a Live Example
Related
Im having some issues achieving absolute positioning on an element. Im trying to implement two banner ads to stay stationary when the user scrolls through a div. I tried changing the parents position to relative and the children I want to remain static position to absolute. This gets the initial placement right, but I am still able to scroll past the absolute divs. Here is the appropriate CSS/HTML.
HTML:
<div id="pane1">
<div id="home-banner1" class="banner">
</div>
<div id="home-banner2" class="banner">
</div>
<?php ..... ?>
</div>
CSS:
#pane1{
width:100%;
background-repeat: repeat;
height:auto;
display:inline-block;
padding:20px 50px 50px 50px;
min-height:500px;
text-align:center;
position:relative;
}
.banner{
width:50px;
height:300px;
background-color:white;
position:absolute;
top:0;
}
#home-banner1{
left:0;
}
#home-banner2{
right:0;
}
Use position:fixed; for the banners so that it will stay on screen at fixed location even while you scroll up or down the page.
EDIT
For the hiding and displaying of banner only below that #container element, you could use some jQuery like this:
$(window).scroll(function() {
var top_div_height = $('#container').height(); // height of the blue top container
if ($(this).scrollTop() < top_div_height) { // hide the rightside banner if the user is viewing that blue top container
$('#home-banner2').css({
'display': 'none'
});
}
else{ //... otherwise show the rightside banner
$('#home-banner2').css({
'display': 'block'
});
}
});
Make sure you set the CSS rule position:fixed; for the #home-banner2 element.
Hope this will help.
Actually your code work exactly as expected.
Position: absolute move the element relative to the closest parent element with position: relative. So, if the parent element go outside the viewport, so it does the child absolute element.
To get the wanted result, you need some javascript/jquery to fix the element as its parent enter the viewport and 'unfix' when the parent leaves.
Something similar to the Bootstraps' affix
How to clip my top bar with screen. So as I goes down on page i mean scrolling down the page the top bar should also move. Just like in Facebook the top bar moves on screen.
I am searching google from last 2 hours. But unable to get, that what we calls it.
and my HTML/CSS is ..
#topnavbar
{
width:100%;
height:50px;
background-image:url('top.jpg');
background-repeat:repeat-x;
}
HTML
<div id="topnavbar">
</div>
You're talking about fixing the position of the navbar to the top of the screen, right?
top:0;position:fixed;
-
#topnavbar {
width:100%;
height:50px;
background-image:url('top.jpg');
background-repeat:repeat-x;
top:0;
position:fixed;
}
In CSS, positioning elements is a fundamental concept. In this case, you want a fixed position. According to MDN, you should adhere to the following guidelines for fixed position elements:
Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and doesn't move
when scrolled. When printing, position it at that fixed position on
every page.
To reiterate, if you want to keep an element in the same position, regardless of where the page is scrolled, use position:fixed
#topnavbar{
position:fixed;
}
Example
It seems there are some sort of image slider on your page. So what I will suggest you to include z-index also.
#topnavbar
{
width:100%;
height:50px;
background-image:url('top.jpg');
background-repeat:repeat-x;
position:fixed;
z-index:500;
}
What you need to search for is how to use the css attribute position: fixed; to have a div or other element 'stay where you put it' relative to it's containing element.
Really quick and rough example:
http://jsfiddle.net/c93cK/
I want to create a layout where I want to display an image to the left and content on the right. The image should stay constant when the content scrolls.
The css I'm using:
<style type="text/css">
#page-container
{
margin:auto;
width:900px;
background-color:Black;
}
#header
{
height:150px;
width:650px;
}
#main-image
{
float:left;
width:250px;
height:500px;
background-image:url('../images/main-image.png');
position:fixed;
}
#content
{
margin-left:250px;
padding:10px;
height:250px;
width:630px;
background-color:Teal;
}
</style>
The HTML:
<div id="page-container">
<div id="header"><img src="someimagelink" alt="" /></div>
<div id="main-image"></div>
<div id="content"></div>
</div>
Alot of time on this site and I have understood that background-attachment:fixed positions the image in the entire viewport and not the element it is applied to.
My question is how do I go about creating that kind of layout?
I do not want to give that image as a background image, as if the window is resized, it might get hidden. I want scrollbars to appear if the window size is less than 900px( my page width) so that the image can be viewed at all times.
That happens with this code, however I would like the image to start at my element instead.
How do I go about doing this??
Thanks in Advance :)
Edited:
I took the advice and added a position:fixed property to #main-image. Using the HTML and CSS as shown above.
Now, I also want to fix the header so that it does not move. Basically, only my content section should scroll.
However, if I add a position:fixed to the header, my #main-image and #content now sit on top of my header.
If I add a margin-top:150px (since my header height is 150px) to the #main-image, it works fine and moves down appropriately.
However if I add a margin-top:150px to the #content, my header moves down by 150px and still sits on top of my #content.
Can someone please explain why this is happening?
Thanks in Advance :)
Take a look at this link:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
You can learn how to position Div's with it.
This will solve your problem:
#main-image {position:fixed;}
EDIT:
I'm not sure of what caused your problem but here is the solution:
#content{
position:relative;
top:150px;
}
My Guess:
I think that happened because when using position:fixed those 2 div's were positioned relative to the the browser window, while the other one was relative to the document itself.
In this link you will see more about positioning and you can test some of these features related to the position property:
http://www.w3schools.com/cssref/pr_class_position.asp
About the fact that one div was positioned over another, you should search for the 'z-index' property. Firefox has a 3D mode so you can see this more clearly:
http://www.addictivetips.com/internet-tips/browse-internet-in-3d-using-mozilla-firefox-11-tip/
Set a min-width on html and body.
Have you tried setting your #page-container to relative and your #main-image container to absolute and setting the position using top, bottom, etc. Then you should also be able to float your #content container to the right.
i need to create a div in position fixed where i will put the image under a div with the rest of the content
i have put in my CSS header {
margin-bottom: 310px;
} to create a blank below space where there is gonna be my img in the div id="background" in position fixed below.
So then i have created the following id:
#background {
position:fixed;
width:100%;
height:100%;
top:130px;
left:0;
z-index: 1;
overflow:scroll;
}
and
#content {
width:100%;
height:100%;
top:60px;
left:0;
z-index:2;
overflow:scroll;
}
The id background is supposed to be the div where my image is gonna be placed right in the blank space l after the header, the id content is the div where i am gonna have my page content and it start from the top.
Here the page : http://fiddle.jshell.net/CGJmE/4/
The effect i want to achieve is exactly this : http://tommywebdesigner.com/Home%20Page.html
but using the div to gain more flexibility. My problem is that i cannot insert properly my div id background in the position fixed with the image.
I think it s something very simple at this stage, How would you do that?
Hope the explanation is clear
You need to do that with background-position: fixed
I've shown you in this jsfiddle: http://fiddle.jshell.net/CGJmE/7/
Good luck!
I do not understand why you put overflow: scroll on #background, it does nothing, really.
Same with the overflow:scroll on the #content. It is redundant.
In general I do not quite understand what your problem is: http://fiddle.jshell.net/CGJmE/6/
I added <div id="background"><img/></div> where you indicated.
This of course still lacks styling for the header and content. (I added background-color to .container so it doesn't look too ugly).
I assume you have that somewhere else?
If you need more help, please elaborate in more detail what your problem is.
How do you get a div position fixed where it also doesn't overlay on top of another div?
For example:
<html>
<body>
<div style="background-color:black; height:200px;">
</div>
<div style="background-color:blue; height:400px;">
</div>
</body>
</html>
What I want is for the top div to always be at the top but not to block any part of the bottom div. For an example: http://twitter.github.com/bootstrap/
The black menu at the top always stays at the top while not obscuring the view of any other div. I examined the topbar css on that website and plugged it into my own test document but I can't get the desired effect. What else do I need to do besides "position:fixed;"?
The top bar in your example does start obscuring things once you start scrolling. However, in your case, I think you should just add a padding to the top of your body equal to the height of your black bar. That way, everything is pushed down and it won't cover anything else up.
Here is a simple example of how it could be done
http://jsfiddle.net/fk3wY/3/
So basicly:
body {
padding-top:40px;
}
#top {
position:fixed;
top:0px;
left:0px;
height:40px;
width:100%;
}