Since Bootstrap 4 doesnt Support .affix anymore, i have to find a other solution for a fixed box.
I want a div Container stay fixed when you scroll to it. For now i solved it with
.fixedcard{
position: sticky;
top:75%;
}
Now i got the problem, that the sticky part starts from the top of my div Container. This causes the problem, that the view differentiate on smaller device. I want to fix the div Container 25% from bottom starting by the bottom of the div Container.
I tried to illustrate my problem.
Try using CSS calc() for it to work out 0% + height of element.
.slider {
height : 300px;
position: sticky;
top: calc(0% + 300px); /*Height of element*/
}
Related
I'm not sure what code is causing the problem, so I'm not sure what to post.
On my website the navigation bar is overlapping the content on the mobile version
The website is www.seshilton.co.za
You have a part in your code that goes something like this:
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
When I remove the position: fixed;, the image jumps down in mobile view under your navigation bar.
w3schools says the following:
"An element with position: fixed; is positioned relative to the
viewport, which means it always stays in the same place even if the
page is scrolled. The top, right, bottom, and left properties are used
to position the element.
A fixed element does not leave a gap in the page where it would
normally have been located."
Try to work around that fixed value. Maybe use position: sticky instead with the combination of z-index.
Try giving margin-top for the header element for smaller screen sizes as,
#media(max-width:500px){
header{
margin-top:100px;
}
something like this would workout, Trying changing the values of max-width and margin-top as per your need.
My problem is quite complex (difficult to explain at least).
I have a responsive navigation bar that is by default NOT on the top of the page but you have to scroll down a bit for the navbar to reach the top of the browser window.
On desktop (48em<) one can simply scroll through the navbar (so it simply disappears when scrolling down) but when scrolling back up, it gets a "sticky" class (thanks to JS) and appears on top.
On mobile, the navbar gets sticky once the scroll position reaches the navbar element.
My problem is with the mobile view. I had to add a piece of CSS code so that the page content won't flicker (jump) when scrolling down. (I only need it when the sticky class is added by JS.)
.sticky + .content {
padding-top: 58px;
}
Which works just fine when the hamburger menu is CLOSED.
When the menu is opened, the navbar's height changes and it requires more padding on top for it not to make the page content jump. See the gif below. 🤔
If I change this padding to 248px then the content doesn't jump when the menu is opened, but it jumps when it's closed. 🤦♂️
.sticky + .content {
padding-top: 248px;
}
I guess I should write a piece of JS code that would do this:
If nav checkbox is checked then change .sticky + .content {padding-top: 248px;}
If it's unchecked change it back to .sticky + .content {padding-top: 58px;}
All this only below 48em. On desktop the padding is supposed to be 0.
Here's a fiddle with the code:
https://jsfiddle.net/zsoltszilvai/t0zLv7yn/48/
I don't know much about JS so any help would be appreciated.
The problem is not in the padding-top.. Actually you shouldn't manipulate your sticky class. CSS position: sticky does for you all the job automatically. You have to fix 3 things:
You don't need to toggle .sticky class on scroll.. You have to remove this code:
// You don't need this all
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
you permanently add class sticky to the header
<header class="header sticky" id="navbar">
You remove
#media (max-width: 767px) {
.sticky {
/* position: fixed; You don't need this */
}
}
Check this fiddle:
https://jsfiddle.net/tyminko/coetd4jx/1/
The modern answer to you problem is to position submenu with absolute.
.big-wrapper-main {
position: relative;
}
.menu {
position: absolute;
top: 100%;
left: 0;
width: 100%;
z-index: 5;
background-color: white;
}
Submenu positioned that way doesn't change the height of the parent, is positioned after it (because of top: 100% - 100% stands for 100% height of the parent).
The problem is that you are using float and clear and we don't do it in web development for the while now and the height of your .big-wrapper-main is 0px so you have to add position relative to #navbar (when it is not fixed).
I had to add .header.sticky to overwrite position relative.
.header.sticky {
position: fixed;
}
http://magician.sdf-eu.org/zee/Click%20This%20One%20To%20View%20What%20I%20Have%20So%20Far.html
Thanks a lot for your help, stack overflow.
CSS is here
http://magician.sdf-eu.org/zee/css/showcss.css
jQuery source code is included in the page.
This is because your ".center" class has position of fixed. Try switching it to absolute:
.center{
//other styles
position: absolute;
}
change the position:fixed to position:absolute at your .center class
.center
{
position:absolute;
left:50%;
margin-left:-490px;
}
Note :at fixed position the element is positioned relative to the browser.
or instead you can use this
.center{
width: 980px;
margin: 0px auto;
}
a bit less code :)
badAdviceGuy is right, it's because your position is fixed. This tells the item to stay on this part of this page no matter what the scroll value is.
However, you shouldn't even need to set an absolute or fixed position here.
A nice fix for you would be to remove all of the styles you currently have set on your center tag.
Then style it like this:
.center{
width: 980px;
margin: 0 auto;
}
We use 980px, because this is the width of your images/image container and most likely always will be, at least on this project.
And margin: 0 auto, basically tells your center container to add 0px on the top and bottom margins, but set the left and right margins to the same px amount so that the element is centered within it's container.
Need help, why is my scrolltop not working on this sample
I dont know why..using the code everything works fine. But updating the css the scrolltop is not working.:( what should i do to fixed this? is the problem cause by my css style?
i used this but it won't scroll at the bottom of the div..
$(document).ready(function() {
alert('scroll must happen');
$('#message_container').scrollTop($('#message_container')[0].scrollHeight);
$('.topbox').html('just sample');
});
There is no visible scrolling happening because the element you're trying to scroll isn't overflowing; it's all displayed. The scrollbar is for the <body> element and not the <div> you're trying to scroll.
You can make it work if you give #message_container a height e.g.
#message_container {height:100px;}
Alternatively, use absolute positioning tricks, for example in this demo. (The initial "undoes" CSS, I used it to keep code short. See MDN)
#container, #head, #body, #foot{
position: absolute;
top:0;left:0;right:0;bottom:0;
}
#head {
bottom: initial;
height:50px;
}
/* position so it get's your desired size*/
#body {
top:50px;
bottom:50px;
overflow-y: scroll;
}
#foot {
top: initial;
height:50px;
}
You have to set 2 things:
Overflow for the div,
Some height, even percentage one (to make it more flexible).
If you don't set any height at all the div will expand and then there is nothing to scroll, in this case the only scroll bar you get is of the document itself (body).
I added a height and overflow property to your CSS and now it works as expected.
jsFiddle
CSS added:
#message_container {
overflow-y:auto;
overflow-x:hidden;
height:300px;
}
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;
}