First of all, you say that your element is position fixed but I do not see any position: fixed; on your CSS.
For what I understand from your explanation, you should do something like the next:
.Navbox2 {
position: fixed;
top: 50%;
margin-top: -14.25em; /* Negative half of height of the element. */
}
This will position your element fixed relative to the web browser window, sticked to the top-left corner, It does not depend on any parent becase what it is looking for to be positioned is, as I said before, the web browser window.
About the top:50%; and margin-top: -14.25em; is used to position a fixed element in the middle of the screen.
The top:50%; is standard and the margin-top has to be the negative half of the height of the element. Because I see that your element has height: 26.5em; and padding:1em this means that the real height is 28.5em, you have to sum one em of the padding from the top, and other em from the bottom.
So now you can see your element fixed and in the middle of the screen.
Example on fiddle:https://jsfiddle.net/Samuel10F/msha7zot/23/
I understand that you want something like this but I am not 100% sure with your explanation, if there is something else just tell me 🙂
I am new to CSS/HTML/Javascript. I sort of just tweak and see what works and what doesn’t, so I don’t really get how to make my element that is in a fixed position to stay relative to the center page. The reason, is that when I zoom out, it stays in the right of the page, which I understand as I have read that fixed position do not have a parent.
So how can I keep it fixed to the position it was in previously.
window.onscroll = function() {
Navmove()
};
var box = document.getElementById("Navfixed");
var stock = box.offsetTop;
var box1 = document.getElementById("Navfixed1");
var stock1 = box1.offsetTop;
function Navmove() {
if (window.pageYOffset > stock) {
box.classList.add("Sticky");
box1.classList.add("Sticky1");
} else {
box.classList.remove("Sticky");
box1.classList.remove("Sticky1");
}
}
.Navnormal a:link {
color: #296da0;
}
.Navhover a:hover {
color: #4386bc;
background: #bcbcbc;
}
.Navbox {
margin: auto;
width: 13em;
height: 26.5em;
color: #b53206;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
background: rgba(255, 255, 255, 0.7);
border-color: #b53206;
padding: 1em;
border-radius: 0px 15px 15px 0px;
}
.Navbox2 {
margin-top: -225em;
margin-left: 102em;
}
.Container1 {
top: 0;
bottom: 0;
}
<div class="Container1">
<div class="Navbox2">
<div id="Navfixed" class="Navbar Navnormal Navhover Navbox">
<span class="Subheader"><strong><u>Directory</u></strong></span>
<p>
<span class="Borderfix1">
<a href = "MaskirovkaPortal.html">Home</a></span>
<a href="MaskirovkaAboutme.html">About Us</a>
<a href="test">Research</a>
<a href="DataRepository">Data Repository</a>
<a href="mememe">Media</a>
<a href="DataReeeee">Other tools</a>
<span class="Borderfix2">
<a href = "ContactUs">Contact Us</a></span>
</div>
</div>
```
<div id = "Navfixed1" class = "Navigate Imagehover">
<ul style = "list-style-type: none;">
<div class = "Donate">
<li><a href = "https://discord.gg/WrNYAdv"><img src = "Discord.png"></img></a></li>
<li><a href = "https://www.patreon.com/blitzofthereich"><img src = "patreon.png"></img></a></li>
<li><a href = "https://www.paypal.me/blitzofthereich"><img src = "Paypal.jpg"></img></a></li>
</div>
<div class = "Donate2 Donate3">
<li><a href = "https://www.facebook.com/blitzofthereich"><img src = "f_logo_RGB-Blue_58.png"></img></a></li>
</div>
</ul>
</div>
```
Essentially this is a scroll for my navbar, however, it works perfectly when at 100% zoom level, but once it gets past the Yoffset it starts sticking to the right because of the fixed position. How can I fix this? Thank you.
Please edit your question and add the HTML for Navfixed1, so we can try to help.
I added it. I hope this helps.
That puts it all the way to the left but what I want is for it just be to the left of the main body. I haven’t included the mainbody in the css because I thought it was redundant.
