Make element fixed position, but follow page scroll if content too big - html

See this webpage.
First try scroll it, see that the left bar remains fixed.
Resize the height of your window, so that not all of the content of the left bar is visible. Now scroll. This time, the left bar is not fixed.
In this page, there is a jquery that calculates height of left bar, compares it to the window-height and then makes the left bar position fixed or absolute.
However, I'm wondering if something similar is achievable through just HTML and CSS, not using jQuery or similar.
Any suggestions?
In short what I'm looking for is a bar with content that remains fixed, but is scrolled if the content overflows. But the scrolling should be together with the whole page.

You can use media queries to direct CSS at certain screen sizes (and other things too) so you could use one stylesheet if the screen is too small. I'm no expert so no examples, but take a look here http://css-tricks.com/css-media-queries/ . Sorry! but guess you figured it out :)
Edit: The working result is this:
#leftnav {
/* default look */
width: 300px;
position: fixed;
top:0;
height: 100%;
}
/* set the size at which the content is clipped and we cannot have fixed position */
#media all and (max-height: 500px) {
/* things inside here will only have an effect if the browser window shows
less than 500 px in the height, so here I apply the special rules */
#leftnav {
position: absolute;
height: auto;
/* etc.. */
}
}

Related

footer is not sticking to the ground

This is how the footer is looking only on the Contact Page of the client's website.
If you notice the footer is not sticking to the bottom of the page and hiding the submit button.
I have tried below CSS but then it sticks and is always visible with scroll, like sticky nav. If I remove the fixed position it again leaves the bottom and hides the submit button.
.footerclass {
background-color: #eeeeee;
position: fixed;
top: auto;
bottom: 0;
width: 100%;
display: inline-block;
}
It is only happening on one page i.e. Contact Us page. I am using "Contact 7 form" using elementor.
How can I fix this? So that it always remains on the bottom of the page for all pages no matter how big the form becomes.
Add position: relative to your main container (from what I can see that's your .site class), as well as min-height: 100vh. This will allow you to set the footers position to absolute, relative to the main container.
It will always be at the bottom of the content, but not stick when scrolling. Using the min-height will also ensure that even if there isn't enough content to scroll, the footer will still be at the bottom of the page.
The problem is with style
#media (min-width: 768px){
.elementor-section.elementor-section-height-full {
height: 100vh;
}
}
Easiest hack would be to add this to your custom css, but with height "auto".
Screenshot from inspector, where it is:
The issue is not with footer, but with content overflowing behind this because of fixed height.

Full-height sidebar

I have the following page with sidebar: https://www.slagerijrudi.be/product/broodje-ham/
I was wondering if there is a simple way to make my sidebar have the same height of the content next to the sidebar. So the sidebar should stretch from header to footer, instead of stopping halfway the page.
In order to allow the aside (or sidebar) to reach its full height, you can make it have an absolute position. Do remember though to turn it off for smaller screen sizes (where you'd want to collapse the sidebar). The best design practice at the moment is to declare specific behaviour for larger screens: #media screen and (min-size:667px) { .. your code for big screens here .. }
Add the following to solve the issue:
.wf-wrap {
position: relative;
}
.sidebar {
position: absolute;
left: 0;
height: 100%;
}
Edit: as a comment on the question put it, a flexbox is a neater solution, but not a 'quick fix'.

Wordpress Twenty Seventeen Header Scroll Mobile Zooms in

I am using WordPress Twenty Seventeen for my website and I am having an issue with my header image on mobile. When I go to start scrolling, the header image kinda zooms-in, I have tried to google this issue but came up with nothing, I've tried going through the CSS code and don't see any transitions or the elements changing when I inspect them, Here is an example site:
https://2017.wordpress.net/
The header image is shorta zooms in when you start scrolling, is there away to prevent this so it stays the same size before scroll?
This is happening because mobile-chrome calculates the address bar into the viewport height and while scrolling webpage the address bar scrolls too and the visible area changes it's height dynamically.
E.g. on 320px X 360px screen, on mobile-chrome with address bar the height of viewport is 564px and after scroll when address bar disappears, the height of viewport changes to 620px.
Viewport Height with address bar
Viewport Height without address bar
Now image in .wp-custom-header taking min-height:100%;height:100% which will change height dynamically, therefore image changing it's dimension while scrolling.
Better way is to fix height of image in pixels in media queries.
.has-header-image .custom-header-media img{
height: 620px;
min-height: 0;
}
Similar issue:
css3-100vh-not-constant-in-mobile-browser
Add position: relative; to your cover img:
.wp-custom-header img {
position: relative;
}
The current position is fixed, which in conjunction with object-fit: cover;, is causing the zoom effect.
You can try following css:
html, body {
height:100%;
}
html {
overflow: hidden;
}
body {
overflow-y: scroll;
-webkit-overflow-scrolling:touch;
}
This will prevent the browsers from hiding address bar. So we will get rid of the jump while we scroll.
I have tried this in your url and it is working.
I suggest to use this in appropriate media queries.

How to clear absolute positioned items on window resize?

So by default, an absolute positioned div will fall out of view if the window is resized, but only the left side of the div. Is it possible to achieve the same effect to the right?
What I mean can be found here: http://diabetes.connectionsquad.com
If you resize the browser window to anything below 1010px you'll notice the left side of the navbar disappears, but if you scroll right, the right side of the nav bar stays in position.
Basically I have content div that is set to 1000px. My navbar is 1050 and it is centered in that content div with absolute position, so it hangs over the content div 25px on each side. When the browser size falls below 1050px, I want that 25px area to collapse and not be visible. By default browsers do this on the left, but not the right.
Can you clear the right side the same way you can clear the left? I tried researching it, but I got a bunch of junk because the search terms get skewed.
I can't see the problem on Chrome. However, you're not setting top or left, it defaults to 0,0 for top and left, so it is attached to the top left corner of its relative parent. If you want it to be attached to the top right, you can give it
right: 0;
top: 0; /* Don't need this, it's the default;
By "out of view", I am taking it you mean out of your set content width.
Have a look at negative positioning. left:-20px; right:-20px
<style type="text/css">
div { position:absolute; left:-20px; right:-20px }
</style>
Hope helps,
Rob
Your layout doesn't require any absolute positioning, and it will give you monster headaches.
Rather than using a fixed width div in the center, you can do an outer margin or outer padding which is flexible.
/*Mobile*/
.outermargin {padding:0% 0% }
/*Screen*/
#media only screen
and (min-width : 700px) {
.outermargin { padding: 0% 7%; }
}
#media only screen
and (min-width : 1400px) {
.outermargin { padding: 0% 20%; }
}
Use margin or padding depending on your needs... This CSS structure is one way to be more fluid and easier once you are used to it.
Or you could have centered it all using something like:
#mycontainer {
margin: 0 auto; max-width:30em; }

conflict between positon:fixed and overflow:visible property in css

Here's the situation. I'm building a webpage where i position an image on the right side of the page. When I make the browser window smaller, i want horizontal scroll bars to appear, so i include overflow: visible property. I also want the image to be positioned fixed so that when the page is scrolled down the content in the middle along with the background scrolls but the image stays as it is. But I am not able to bring both features to my page.The two properties seem to conflict each other. Is there a way around it?
Your code is too little.The problem of the front with the example of code.
try img fixed:
img.fixed{
position: fixed;
right: 10px;
top: 10px;
width: 100px;
z-index: 55;
}
I think you need to use css concept called media types....
you can not achieve this using only position:fixed
add this css to your page
#media all and (max-width: 699px), (max-height: 500px){
.overflowDiv{
position:fixed;top:100px;height:100px;width:100px;
overflow:scroll;
}
change max-width and max-height according to your need
here is jsfiddle demo
Hope it'll help you.
Thank you