Let's say I have a site with a central div, approximately 50% of the width of the window, with other divs either side of it filling up the remaining space. The spanning divs are fixed, and don't move, nor can they scroll.
At the moment, when my mouse is over one of the spanning divs, I (naturally) can't scroll the central div. My question is this: is there a way to ALWAYS have scroll focus on a particular div, no matter where the mouse is located on the page?
EDIT: What I actually have is this:
<div id='wrapper'>
<nav id='sidebar'></nav>
<div id='rhs'></div>
</div>
where wrapper and sidebar both have position fixed, and sidebar and rhs are adjacent in the center of wrapper (i.e. margin: 0 auto; to sit them in the middle). Scrolling with my mouse over either wrapper or sidebar does not scroll rhs, despite the positions being fixed (so Toni Leigh's answer doesn't work for me here).
Yes, you can do this using position: fixed;
The two outer divs are fixed to the screen regardless of scroll position. The the central div scrolls regardless of where the mouse pointer is. You use top and bottom to fix the full height of the screen, then left and right to fix each on either side.
You can still interact with content in the fixed outer divs.
Please see this example
Something like this? Demo
You set the two side divs to be have a position: fixed property and by using top: 0, left: 0 and right: 0 you can move these into position to the top left and top right respectively.
Then you can have a regular element in the middle. The scroll will now always affect the non-fixed element. (I added a background picture so you can see they don't scroll).
HTML
<div class="fixed left"></div>
<div class="center"></div>
<div class="fixed right"></div>
CSS
.fixed {
width: 25%;
height: 100%;
background-image: url('http://www.6wind.com/blog/wp-content/uploads/2014/04/Vertical-White-car-Banner.jpg');
position: fixed;
top: 0;
}
.left {
left: 0;
}
.right {
right: 0;
}
.center {
position: relative;
margin: 0 auto;
width: 50%;
height: 5000px;
background: red;
line-height: 0;
}
Related
Is there anyway I can make an HTML div move down while scrolling instead of moving up without using javascript? I know you can use window.onscroll = function() { } and have that move the position of an object while scrolling, but is there anyway I can move an object down with just CSS and HTML?
I think you want to retain your div on the viewport while scrolling down.
There are 2 ways for it.
Make the element position fixed and apply positioning to that element.
Make parent element position relative and make your div position sticky and apply positioning.
Positioning means adding any one of the top, right, bottom, and left properties.
.parent {
height: 1200px;
width: auto;
position: relative;
}
.floating {
position: sticky;
top: 10px;
width: 100%;
height: 60px;
background: black;
color: white;
}
<div class="parent">
<p>Hi this is parent</p>
<div class="floating">
This is floating element
</div>
</div>
With HTML below, why is horizontal scroll bar visible and vertical isn't?
This is true for Chrome, Firefox and Safari, but not for Edge where both scroll bars aren't visible.
To me, it will be logical that both scroll bars aren't visible as it is in Edge browser.
<div style="position: absolute; width: 300px; height: 300px; border: 1px solid black; overflow: auto;">
<div style="transform: translate(150px, 150px);">
<div style="position: absolute; left: -25px; top: -25px; width: 50px; height: 50px; background: blue;"/>
</div>
</div>
The second div has height 0 because its only inner element is a div with position: absolute. By default, div elements have width 100% and height to be the minimum to comport all inner elements, but elements with position absolute or fixed don't need to be comported inside their parent container, so they don't contribute with their container's height.
If you want the vertical scrollbar to show up, you can either force the second div's height to something greater than 300px or add more child elements with other types of position.
I've got a cordova app using jquery, jquery-mobile, iscroll and iscrollview
I'm not exactly committed to any of these tools.
I've got the jquery-mobile header/footer stuck to the top and bottom of the screen just fine.
I have a scrollable div between the header and footer. It will contain variable amounts of data. Sometimes the data will be less than the height of the div and sometimes it will be greater (hence the scrolling)
Here's the tricky part. I want to stick the bottom of the scrollable div to the top of the footer. When I add stuff to the div i want the most recently added closest to the top of the footer so the top of the scrollable div looks like its growing upwards towards the bottom of the header as data is added.
Once the top of the scrollable div is fille by its content then i want to be able to scroll it.
Has anyone been able to achieve something like this?
Here's a neat little trick for you.
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
Now the CSS
div {
width: 100%;
}
.header {
position: absolute;
top: 0px;
left: 0px;
height: 50px;
}
.footer {
position: absolute;
bottom: 0px;
left: 0px;
height: 100px;
}
/* the magic */
.content {
position: absolute;
top: 50px; /* matches height of header */
bottom: 100px; /* matches height of footer */
left: 0px;
overflow: scroll;
}
The neat thing about forcing .content to have both a top and a bottom is that it stretches the div so that it's always the proper height. IF you specified height on it, it wouldn't work, but because the height is determined by the top/bottom property, it's dynamic. I think this gets you to where you want to be.
Here's a fiddle
Edit: Here's what it looks like with content
Edit 2 - forcing content to grow from the bottom.
I'm not sure this is a good idea, and I'm not sure I would ever seriously recommend doing things this way. However, using vertical-align it's possible to force content to grow from the bottom. I suspect that it would be better to just set a margin with javascript that shrunk as content grew, but... maybe not. With all that said, here's one way to do things with CSS.
This requires a little bit of restructuring of the content div.
<div class="content">
<span class="margin"></span>
<span class="inner"></span>
</div>
And a little bit more CSS
span.left-margin {
height: 98%;
width: 0px;
display: inline-block;
}
span.inner {
width: 99%;
background-color: white;
display: inline-block;
vertical-align: bottom;
}
It looks like this with a little content
It looks like this with a lot of content
If you want the scroll bar to stick to the bottom as content comes in, you'll need to do some javascript (easy to google it).
I'm not completely happy with doing things this way because if you set height 100% or width 100%, the content div gets a scrollbar automatically from the beginning. However... it looks pretty good and should work in most (if not all) browsers.
The website displays fine on all resolutions, the problem arises when the window is resized.
So what I have done is create 5 div containers and given each container 20% width within a body of 500% width. Below is one of them
<div id="workslide" class="container">
//some a tags goes here
</div>
CSS
.container {
bottom: 0;
float: left;
height: 100%;
margin: 0;
position: relative;
width: 20%;
}
Within each container is an img slide which is set in css background-size: contain; which scales correctly for all resolutions. When the window is resized from the left, for example, this happens. The previous div bleeds in :
Any ideas would be appreciated !
I implemented a fix for the problem after the pointer from Matt. Works perfect now:
//added following lines of code within document ready:
$(window).resize(function() {
$(window).scrollLeft($(/*element you have scrolled to*/).offset().left);
});
I want to show a div which is always visible even as the user scrolls the page. I have used the CSS position: fixed; for that.
Now I also want to show the div at the right hand corner of the parent div.
I tried to use this CSS code to achieve the goal:
.test {
position: fixed;
text-align: right;
}
But it doesn't align the element on the right side.
My example page can be found here, the div element I want to align is called test under the parent class parent.
Is there any CSS or JavaScript solution to aligning the fixed position element on the right side of the screen?
You can use two imbricated div. But you need a fixed width for your content, that's the only limitation.
<div style='float:right; width: 180px;'>
<div style='position: fixed'>
<!-- Your content -->
</div>
</div>
Use the 'right' attribute alongside fixed position styling. The value provided acts as an offset from the right of the window boundary.
Code example:
.test {
position: fixed;
right: 0;
}
If you need some padding you can set right property with a certain value, for example: right: 10px.
Note: float property doesn't work for position fixed and absolute
With position fixed, you need to provide values to set where the div will be placed,
since it's a fixed position.
Something like....
.test
{
position:fixed;
left:100px;
top:150px;
}
Fixed - Generates an absolutely positioned element, positioned relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties
More on position here.
Trying to do the same thing. If you want it to be aligned on the right side then set the value of right to 0. In case you need some padding from the right, set the value to the size of the padding you need.
Example:
.test {
position: fixed;
right: 20px; /* Padding from the right side */
}
make a parent div, in css make it float:right
then make the child div's position fixed
this will make the div stay in its position at all times and on the right
I use this to put a div (with its stuff inside) at the bottom-right of the page with some margin:
.my-div-container{
position: fixed;
bottom: 1rem;
left: 90%;
}
The best solution I found is to give the element a left margin . The elements below it in left margin will be ckickable
#my_id{
margin-left: 75%;
position:fixed;
right: 0;
}
<div id="my_id" >
My Text
</div>
Stack Overflow
Here's the real solution (with other cool CSS3 stuff):
#fixed-square {
position: fixed;
top: 0;
right: 0;
z-index: 9500;
transform: rotate(-90deg);
}
Note the top:0 and right:0. That's what did it for me.
Just do this. It doesn't affect the horizontal position.
.test {
position: fixed;
left: 0;
right: 0;
}