If I have a dynamically expanding block of content and a user has scrolled all the way to the end, is there a pure CSS solution to keep the user at the end when the content expands, appearing to push the content element's siblings upward?
I tried setting position: sticky, bottom: 0 on the element, but then it is taken out of the document flow and its siblings are overlapping.
It is not possible to change the position of the viewport with pure CSS, which is what you need to do to achieve the effect you're describing. You'll need to use javascript.
Related
I'm trying to make a kind of chat room. When new messages come, previous messages move up and dissappears when they leave the div.
I want to make the div scrollable to see previous messages but overflow: scroll doesn't work.
I tried to set elements to position:relative instead of absolute but then the elements position themselves chaotically.
This is what I have: https://jsfiddle.net/2Lgq1zfa/1/
I checked your code but there was no .ventana class defined for js or html. However to make scrolling work on absolute positioned elements you should define width and height so the browser identifies when the overflow happens.
I hope this is what you needed. ;)
I am developing a store for a friend and I want to make the "ADD TO CART'S DIV" fixed when the users scrolls after it. As I am far from being a CSS expert I am facing problems with it.
I tried to use JS to add "position: fixed" to the div, but I cant do that because the div has a relative position and changing it do fixed mess up with all the div's elements
this is the link
and this is the div I want to make fixed (the div id is rightcol):
I would also want to make the div stop right before footer
Thanks in advance
Use this property to make div sticky on scroll
position: -webkit-sticky;
position: sticky;
top: 0;
the header is your website is also sticky. you can use the same properties it works
You can use position sticky. sticky element works as fixed element with respect to its parent element. It will serve as fixed in the space provided by its parent.
So in order for your project. You need to restructure your html in such a way that sticky element should get enough space to behave as fixed element in that region.
I'd like to have many elements fixed, but then have the main text block scroll.
Before I start coding, I'd just like some advice on the best way to do this. Should I wrap ALL the fixed elements together, and then inside that, have a relative element for the scrolling part?
Here is what I am trying to do:
I think you should create a main wrapper for your page which will have a relative position and that you center horizontally on your page (using margin: 0 auto; for example).
Then add inside that wrapper a <nav> for your top navigation and set its css position property to fixed, and then do the same for the sidebar with a <aside>.
Then add inside the wrapper a <div id="content"></div> for instance for your content and set its css position property to relative. If you want the content of this div to scroll vertically, you can add the following css : overflow: auto;
If I understand you well, you want your content to change without the page being reloaded & that the content scrolls, but not the rest.
You can :
Wrap your content into an iframe, so you can change the content without refreshing the whole page with a fixed height,
Just use a fixed height to your content div, and set this :
#yourDivId{
overflow:scroll;
overflow-y:none;
height: XXX px; //Fixed height;
}
Note : your mouse will have to hover the content to scroll it.
Well an advice?
Create separately three blocks; for fixed Nav, Fixed sidebar(for category) and scrolled main block(article). It'll be easy to order, I guess.
How many Category will display on the fixed sidebar? if the list heigher than window's screen, some category will be hidden unless you make it 'overflow:auto'. also consider about possibility of user resizing the screen.
Happy Coding !
I'm working on an interface that utilizes a list of items within a scrollable div, some of which utilize a rollover menu on hover that extends outside of the div. Disabled scripting compatibility is a priority for the site, so I'm trying to see if the interface can be done with only CSS before I start getting into other compromises.
I've got some examples below. The menu in question is on the right side with heading 'select projects'. The third list item from the top in each page contains a rollover menu.
In order to keep the rollovers positioned relative to the their parent when scroll position changes, I positioned the parent li's relative and the child ul's positioned absolute.
EXAMPLE 1
Of course, once overflow:auto is on and the scroll in place, the rollovers are cut off from displaying.
EXAMPLE 2
I tried removing the relative positioning of the parent li's, and retaining the absolute positioning of the rollovers to free them from the div, but then they do not position properly when scroll position is changed.
I can only post two links but if you want an illustration, it's here: eypaedesign.com/markets-rollover-issue-no-relative.htm
With the exception of changing the UI, is there a combination of properties I'm not seeing here that can be used to make this interface work on CSS? I could position the entire div as absolute, and add a large amount of left padding for the rollovers to appear in, but that seems pretty inelegant.
Thanks folks -
With only CSS, you are limited to only one or the other: overflow: auto or overflowing hover-menus. Using separate visible and auto properties for overflow-x and overflow-y doesn't work, so I think your best bet is to go with the padding solution you were considering.
With proper use of absolute positioning and z-index (in case you are concerned about padded menu container hit-blocking any elements under the padding), you should be able to do it without destroying the rest of your layout. You'll have to control the size of all child elements inside the scrollable container of course, so that they don't extend to the full width of their padded parent.
Adding these properties - with no other changes - seems to work on your site, so perhaps you can get away with it easily:
#project_menu {
padding-left: 300px;
margin-left: -300px;
}
.center {
position: relative;
z-index; 10;
}
if you put a height of 293px in your class nav it should be ok.
Or in you project_menu ID, As I can see that ID has a height of 218px and your UL is 293px.
By changing one of those 2 you should be ok. It depends on how you set it affect other element.
But using project_menu ID should be just good.
I have a page with fixed position of header on scroll. Similar as on StackOverflow top menu.
I need use height = auto because I can show information in single or multiple lines. If I have used two or more lines than my header is shown over the main text of page.
I can solve this with JS script by set body margin-top = header width.
How I can solve this situation only on CSS without JS?
I don't think it can be done purely with CSS. Elements with position: fixed are taken out of normal page flow, and so they are not used in calculating position of other elements on page.
I suppose you could render two headers, one with position: fixed, and other one without such declaration (and maybe with 'active' page elements, like links, input fields or buttons replaced with static text), used only to move other page elements down. That would be a terrible hack, though.