I need to do fixed content page and scrolling side bar. But content sometimes have height more than the browser windows. How scrolling sidebar but watch content on the left?
That is exactly what ..
CSS Positioning
.. was created for.
Try making the content fixed and the right div relative.
Related
I want to have a sticky header after some amount of vertical scrolling as it is provided here: https://www.facebook.com/coliseumproductions/
Once the header div containing 'Like', 'Share' and 'Suggest Edits' button touch the top of browser window, it appears as sticky header and does not scroll. Only the content below it is scrolled. How to achieve this?
I have observe that when the desired scroll position is achieved, few styles are applied on div._1pfm and div._3d9q.
Mentioning position:sticky sticks the header to the top. I want the header to stick only once the required div has reached the top after scroll.
How can it be identified that header div has reached the top position of browser?
This thing can simply be achieved by CSS property position: sticky. You don't need any JavaScript.
Refer to this example: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sticky_element
Hope this resolves your problem.
I have position sticky block that can be higher than window height and also can be less (depends on viewport). That means in some situations I cannot scroll to overflowed content. How to stick block from bottom if this block is bigger than window?
You should Probably try setting CSS overflow:visible to your body tag or the container tag, this should give you scroll bars up to the bottom of the sticky element
Do not try to alter sticky JS core file, this may effect the behavior of other sticky elements.
Paste your code here perhaps we can help better.
I am writing a single page app for mobile use antd-mobile,
There's s a Tabbar on the bottom of the page, and a list of items that u can see the background is gray, the problem is the Tabbar cover the content of the when I scroll down to the bottom.
How can I make the list area to be scroll area not the whole page?
Some code could help us help you... But there is multiple strategies you could use, all depending on your actual code and what you'd prefer to achieve.
Use margin-bottom on body. This will add a margin to the bottom of your pages, having it set to the height of your Tabbar, this will ensure that it never hides the bottom content. That is assuming your Tabbar is in a fixed position. This solution will make the scroll bar show on the entire page.
Use a defined content holder height, and set overflow-y:scroll. You could set the height of your content holder to be 100vh minus the height of your Tabbar. This way it is "fullscreen" and you can then apply overflow-y:scroll to make that part scrollable. This will display a scroll bar on the element, not the entire page.
I'm editing a wordpress theme and I want the main content area to be larger. But when I enlarge it beyond the limits of the screen it does not scroll. And I know the most common cause of this problem is position: fixed, but I only found two cases of this in the code and when disabling both it doesn't fix the issue.
The original code makes a div with the id of "content" have a scrollbar, but I made the div much larger and so I want the scrollbar to appear and be back in the default spot like most pages have it.
Resources: Here is the original page for reference. (You can just inspect the code from there since I haven't made any edits to it yet anyway.)
http://themes.themolitor.com/wpzoom/2011/04/first-blog-post-title/
You page has been setup in such a way that, a javascript file is placing an inline style to the content, and giving a dynamic height depending on the screen size.
and the content id has a overflow auto, which gives a scroll bar when the content overflows outside the parent element.
So if you wan to have the scroll bar removed either do "overflow: hidden;" (this will hide the content which overflows unfortunately.
Or you will have to rearrange the whole page structure.
Your problem seems to be in http://themes.themolitor.com/wpzoom/wp-content/themes/wpzoom/style.css, where html and body are set to overflow:hidden. If the content extends past the end of the page, it will not scroll. You can change it to overflow:auto (auto adds a scroll bar when there's too much content to fit), or you can just get rid of the overflow property because auto is the default behavior.
overflow:scroll /* always show a scroll bar */
overflow:auto /* show a scroll bar when the content of a box is bigger than the box itself */
overflow:hidden /* never show a scroll bar */
I have a jQuery plugin that makes pages dynamic (found here: http://css-tricks.com/dynamic-page-replacing-content/ - Demo here: http://css-tricks.com/examples/DynamicPage)
My nav bar is in the footer (I know this is not generally a good idea but it suits the layout and objective of my website).
When there is not much content on the page, obviously the footer is in view on the window so no action needs to be taken. However, when a longer dynamic page is loaded which requires a scroll bar, the footer is pushed out of the window to make space for the content.
I want the footer to STOP and fix itself to the bottom of the window if the dynamic page creates a scrollbar, essentially so the navigation is always in view.
I've looked at other solutions on this site, but it's all either to permanently stick the footer to the bottom of the window, or only fix to the top when scrolling. I've tried inverting those solution values (i.e. changing top to bottom) but to no avail.
Could anyone help?
wrap in a DIV with overflow auto or scroll