We Keep Coding

How do I keep a position:fixed element next to the center element

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">
Home</span>
About Us
Research
Data Repository
Media
Other tools
<span class="Borderfix2">
Contact Us</span>
</div>
</div>
```
<div id = "Navfixed1" class = "Navigate Imagehover">
<ul style = "list-style-type: none;">
<div class = "Donate">
<li><img src = "Discord.png"></img></li>
<li><img src = "patreon.png"></img></li>
<li><img src = "Paypal.jpg"></img></li>
</div>
<div class = "Donate2 Donate3">
<li><img src = "f_logo_RGB-Blue_58.png"></img></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.

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 :)

CSS Change Navbar Background color when scrolling

My navbar has a white background, but it should be transparent on the landing page and white when i scroll down and white on every other page.
I used the code from: Changing nav-bar color after scrolling?
EDIT:
So I added a fiddle with the answer below but somehow its not working
https://jsfiddle.net/jy6njukm/
Here's my code:
javascript:
$(document).ready(function(){
var scroll_start = 0;
var change_color = $('#change_color');
var offset = change_color.offset();
if (change_color.length){
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
// the white normal navbar
$(".navbar-add").removeClass("navbar-trans");
} else {
// what the users sees when he lands on the page
$(".navbar-add").addClass("navbar-trans");
}
});
}
});
Here is my navbar css:
.navbar-fixed {
position: fixed;
height: 70px;
padding: 0px 30px;
left: 0px;
top: 0px;
z-index: 50;
width: 100%;
background-color: white;
box-shadow: 0 1px 5px 0 rgba(0,0,0,0.07),0 1px 0 0 rgba(0,0,0,0.03);
}
.navbar-trans {
background-color: transparent !important;
box-shadow: none !important;
}
And I have my navbar html with only
<div class="navbar-fixed navbar-add">
.....
</div>
and my home.html.erb with
<div class="container-fluid banner bg-picture" id="change_color"
style="background-image: linear-gradient(-225deg, rgba(0,0,0,0.2) 0%,
rgba(0,0,0,0.35) 50%), url('<%= asset_path('banner_logo.jpeg') %>')">
</div>
It kind of works but the problem now is, that everytime I refresh the page, the navbar is still white and it only turns transparent when I scroll up, to the top of the page. It turns white when I scroll down though, like I want it to be.
I inspected the page and everytime I refresh it, the background-color of the class is still white even though I set this to be transparent in the javascript?
How can I make it possible that the background-color of my navbar is transparent on my landing page?

Using HTML
Your HTML should be:
<div class="navbar-fixed navbar-add navbar-trans">
.....
</div>
Since it already contains the navbar-trans class, it will remain transparent. Once the user scrolls, the javascript will kick in, and remove/add navbar-trans class as per the code.
Using JS
var landingPage = 'YOUR_LANDING_PAGE_URL';
function updateNavStyle() {
if(landingPage.length > 0 && location.href.toLowerCase().indexOf(landingPage.toLowerCase()) >= 0) {
var offset = $('#change_color').offset();
var scroll_start = $(document).scrollTop();
if (scroll_start > offset.top) {
// the white normal navbar
$(".navbar-add").removeClass("navbar-trans");
} else {
// what the users sees when he lands on the page
$(".navbar-add").addClass("navbar-trans");
}
}
}
$(document).ready(function() {
var scroll_start = 0;
var change_color = $('#change_color');
if (change_color.length) {
$(document).scroll(updateNavStyle);
updateNavStyle(); // Note this.
}
});
Here, in addition to binding the updateNavStyle function on scroll, I have added a call to it once the DOM is ready. As a result, as soon as the page loads, the function will be executed once and it will apply the styles based on scroll position.
Update:
If your landing page is 'index.html', where you want this function to work, write its value in variable landingPage. So the function will not run in other pages such as 'about.html' or 'contacts.html'.

Javascript JQuery scollTop reset when scolling back up

hi i have the following
$(window).scroll(function() {
if($(window).scrollTop() > 200){
$('.ccbrtlogo').css({'height': '25'});
$('.ccbrtlogo').css({'margin-top': '0'});
}else{
$('.ccbrtlogo').css({'height': '50'});
$('.ccbrtlogo').css({'margin-top': '16'});
}
});
it does work when i scoll down it sets the logo to a small 25px height and changes the margin-top to 0 but when i scoll back up it only changes the logo back to 50 but does not apply the 16px margin-top
What am i missing here?

You need to add also the measurement unit. In case of 0, you can put nothing after it because everything: 0px, 0in are 0. But with another number you need to use 16px instead of 16
$('.ccbrtlogo').css({'margin-top': '16px'});
Example
$('#first').css({'margin-top': '100'});
$('#second').css({'margin-top': '100px'});
div{
float: left;
margin-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">
First
</div>
<div id="second">
Second
</div>

How to position an arrow based on the position of a different object on the page in Javascript/Mootools

I've created a script that positions a box on page based off of the position of an element on hover. Works just fine, however in addition the moving said box, I want to position an arrow inside the box to point at the hovered over element. I just can't figure out how to though.
I've tried positioning it horizontally similarly to how I positioned it vertically using, but that doesn't even come close to being correct. My javascript:
docSize = $('innerbody').getSize();
hint_obj = $('hint_obj');
hint_arr = hint_obj.getChildren('.hint_arr')[0];
$$('.item').addEvents({
mouseenter: function(e) {
var el = e.target;
var elemPosition = el.getPosition();
hint_obj.setStyle('bottom', (docSize.y - elemPosition.y - 80));
hint_arr.setStyle('left', (docSize.x - elemPosition.x));
},
mouseout: function(e) {
hint_obj.setStyle('bottom', null);
}
});
I've made a mockup of what I'm attempting to do here: http://jsfiddle.net/0jowade8/2/
Any advice would be appreciated.

As Dimitar Christoff mentioned, it can be solved with CSS only by using :after pseudo-element.
.item:hover:after {
border-bottom: 14px solid rgba(255, 255, 255, 1);
border-left: 14px solid rgba(0, 0, 0, 0);
border-right: 14px solid rgba(0, 0, 0, 0);
content: "";
position: absolute;
top: 66px;
left: 26px;
}
FIDDLE

Auto resize child divs so they equally share width of parent

Let's say I have a parent div with a fixed width of 320px and I want to be able to (or I want my users to be able to) add any amount of child divs to the parent and have them all adjust automatically to share the width of the parent.
I don't want the parent width to change, nor do I want to do this with any sort of scrolling overflow - I just need for the divs inside to fit the width of the parent equally.
For example,
If there is only one child then the width is 100%, if there are two then their width is 50% each etc
How would I go about doing this?
I've approached this many different ways with css, but can't seem to figure it out. I'm assuming this has to be done with some sort of javascript, but I don't know enough to pull it off.
But, If it can be done with just css, that would be great.
Thanks in advance.
(Don't know if you'll need to know this, but the child divs will have no text. They're just blank with background-color and fixed height)
Example code:
CSS
.box {
margin: 10px;
background: white;
border-radius: 6px;
border: 1px solid darken(white, 12%);
-webkit-box-shadow: 0px 1px 4px rgba(50, 50, 50, 0.07);
-moz-box-shadow: 0px 1px 4px rgba(50, 50, 50, 0.07);
box-shadow: 0px 1px 4px rgba(50, 50, 50, 0.07);
float: left;
}
.line {
height: 6px;
opacity: 0.4;
-moz-opacity: 0.4;
filter:alpha(opacity=4);
margin-bottom: -1px;
float: left;
}
HTML
...
<div class="box">
<div class="line"> </div>
</div>
...
#will be able to add any amount of .lines

Use display: table (and table-layout: fixed with fixed width for container if you need equal-width columns) for container and display: table-cell for child elements.

Hope this helps!
<html>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script tye="text/javascript">
function resizeChildren( $div ){
var $children = $div.children(".child"); // Change .line to the appropriate class of the children
var $count = $children.length; // Determine how may children
var $width = $div.width(); // Get width of parent
var $cellwidth = Math.floor( $width / $count ); // Calculate appropriate child width
$children.width( $cellwidth ); // Apply width
}
function addChild( $div, $html ){
$( $html ).prependTo ( $div ); // Add a new child
resizeChildren ( $div ); // Call the resize function
}
$(document).ready( function(){
$("#add").click( function(){ // When <a id="add" is clicked...
addChild( $(".parent"), '<div class="child">Random...</div>' );
return false;
});
});
</script>
<style type="text/css">
.parent {
width: 500px;
border: 1px solid #000;
}
.child {
float: left;
}
</style>
<div class="parent" style="width: 500px;">
<div class="child">Random...</div>
<br clear="all" /></div>
Add DIV
</body>
</html>

Some browsers require also rule font-size:0px to show DIV which height is below 1em, otherwise their height will be 1em.
EDIT
There has came more info while I was writing my answer. If that table lay-out is working, answer to the last comment is above. I removed the part of my answer considering positioning, because I missunderstood your question also.