This question already has answers here:
Stopping fixed position scrolling at a certain point?
(13 answers)
Closed 7 years ago.
I am building the following layout which can be viewed here:
http://www.freemicsnyc.com/Other%20Versions%20&%20Backup/FreemicsNJ/new_template.html
You will notice the one div with the days of the week (mon, tues, wed, ..) does not scroll with the rest of the page since it is styled with the following css:
.column_headings{
...not important stuff
position: absolute;
margin: 416px auto 0 auto;
left:0;
right:0;
}
This behavior is not what Im looking for.
What I would like, is for that div to scroll along with the rest of the page like normal until it gets to the very top of the viewport, at which point it would stay there like a sticky header as the remainder of the content scrolls beneath it.
Would I need parallax scrolling for this? JQuery? Is there a way to do it with just CSS?
Any help would be much appreciated!
You can use a jQuery plugin such as: http://stickyjs.com/ for now as the full css implementation of this, position: sticky has very low browser support as of the moment.
Replace your CSS code with below and see if it helps:
CSS
width: 970px;
height: 60px;
background: lime;
text-align: center;
white-space: nowrap;
position: relative;
margin: 0 auto 0 auto;
left: 0;
right: 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
display: block;
Related
This question already has answers here:
Font scaling based on size of container
(41 answers)
Closed 9 months ago.
I want to scale the font of the text in the circle if it overflows.
If it is overflowed I want the text to resized until it fits inside the circle. I'll eventually be coding in dynamic text, so I need to find a solution that is able to check overflow every time it's re-rendered.
I've been trying to do this with Javascript and React.js, however I'm having a hard time finding a solution. My current idea is to create a function called changeFontSize and do a conditional where I check if the text width is greater than the circle width. Then keep decreasing the size until the text fits.
I'm still quite new to Javascript, so I'm unsure how to execute this.
I want to be able to do this without calling in a package to handle it for me.
.circle {
justify-content: center;
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid red;
line-height:50px;
text-align:center;
}
<div class="circle">circleCIRCLEcircle</div>
There's a great npm package called fitty that will fit the text to the size of the container automatically:
<div id="my-element">Hello World</div>
<script src="fitty.min.js"></script>
<script>
fitty('#my-element');
</script>
.circle {
border-radius: 50%;
width:100px;
height: 100px;
padding: 10px;
background: #fff;
border: 3px solid #000;
color: #000;
text-align: center;
font: 32px Arial, sans-serif;
word-break: break-word;
white-space: break-spaces;
<div class="circle">circleCirlcecircle</div>
I am trying to imitate SO page behaviour of having a menu on the left and a bar on the top, both being sticky. The design is a sinle page dynamic application so when I say "switch pages" I am actually changing the html of a single page.
I create a menu as a list and a bar set them to be sticky as follows:
#topNav {
margin: 0px;
width: 100%;
height: 40px;;
overflow: hidden;
list-style-type: none;
color: white;
background-color: rgb(22, 16, 99);
position: sticky;
position: -webkit-sticky;
top: 0; /* required */
z-index: 1;
}
.menu {
margin: 0;
padding: 0;
padding-top: 20px;
position: sticky;
position: -webkit-sticky;
top: 40px; /* required */
border-right: 2px solid black;
}
However what is happening right now is, if there is a scroll bar, the menu is marginally (3 pixels maybe) more to the left than when there is no scroll bar. This creates a really ugly effect since switching between pages with little text to large pages moves everything just enough for it to be human noticeable. How can I prevent the scroll bar from re-formatting the text?
you can set overflow-y:scroll to that container. This makes the scroll always show irrespective of the content. So your content doesn't move around when switching pages.
Update: If you don't want the scroll to always show, you have to detect if the container has a scrollbar through javascript and append a class to your menu that would shift it to it's original position.
Here is a sample fiddle: http://jsfiddle.net/85a0sc4r/
I am creating an angular app and i have created a layout but i am having some trouble with its functionality.
currently the header stays fixed in position as does the activator but the menu appearing on rollover does not and when scrolling the content in the body appears over the top of the header. i am not fantastic at css but know some. any help fixing this would be greatly appreciated :)
again any help at all would be fantastic.
If you add the z-index property to the header class it puts the header over the activator.
.ts-header {
height: 74px;
width: 100%;
background-color: #fff;
border-bottom: 1px solid #000;
position: fixed;
z-index: 999; /* NEW */
}
https://jsfiddle.net/kyu0x9ym/1/
I have one container with two children elements inside of it. I want to place one child at the top and other child at the bottom of the container . The middle part (the content) should scroll between the top and bottom child elements.
I want both children elements inside the container to have a fixed position and the content should scroll without scrolling both top and bottom div.
I'd like a solution using CSS or jQuery, please. For a JSFiddle example, see my comment below.
I would like to add the below as a comment but because of low reputation I was unable to do it.
Take a look at the following jsfiddles:
1) http://jsfiddle.net/davidpauljunior/g2ydV/8/
2) http://jsfiddle.net/yASFU/
Style:
#content {
width: 80%;
margin: 0 auto;
padding: 60px 0;
}
You could add another inner div to hold the content, and set overflow-y: scroll on it so that only the content will scroll and not the header and footer. Here is a modified version of your fiddle to illustrate this concept:
http://jsfiddle.net/jwnace/vtuv6wh6/
Just add position:fixed; to the necessary elements in the CSS. So the CSS should look something like:
.inside {
top: 2px;
border: 1px solid #000;
background-color: #000;
color: #FFF;
height:50px;
position:fixed;
}
.inside2 {
bottom: 2px;
border: 1px solid #000;
background-color: #000;
color: #FFF;
height:50px;
position:fixed;
}
Further read
Updated fiddle to reflect the same.
I just ran across an issue with a element (the header), fixed positioned to the top of the page, disappearing. This was found in a mobile site I was creating.
What was causing this was a click to a menu button, which would open the sidebar navigation. When I clicked this button, the sidebar would open as expected, but then the header would disappear. What would be left of it was the remnants of an image replacement technique I was using the Phark Method; the text "menu" was left behind. (I'm fairly sure that this is not important to the issue at hand, but I could be wrong.)
The header element had styling like so:
header{
position: fixed;
top: 0;
z-index: 10000;
width: 100%;
background: url('../images/header-bg.png') #111 repeat-x top left;
border-bottom: 1px solid #090909;
text-align: center;
}
This would only happen in Android 4.0 stock browsers (Galaxy Tabs/Galaxy Nexus were some I tested).
What would cause this to happen in just Android 4.0 browsers?
What seemed to be the issue was the fact that the header element did not have a left property value. To fix this, I just added a left:0; property to the header element, giving me the following CSS:
header{
position: fixed;
top: 0;
left: 0;
z-index: 10000;
width: 100%;
background: url('../images/header-bg.png') #111 repeat-x top left;
border-bottom: 1px solid #090909;
text-align: center;
}
After figuring this out, I recall having a similar issue on a desktop site that used fixed positioning. The fact that I didn't have a left property set caused the fixed element to not even appear when the page loaded.
Hope this fixes/sparks ideas to a fix for users in the future! I know I'll be setting both a x and y axis position property to all my fixed elements from now on ;)