Make a div stick to the left when scrolling - javascript

So I am trying to create a left-sided nav bar, but after scrolling I can't get it to correctly stay to the left.
I have tried using:
position: fixed;
and
position: absolute;
However it cuts the width of the DIV down completely.
To get a view of what I'm working with go to: http://198.50.242.77/YouBB/
I'd prefer to use strictly CSS only but if I must use JS I'll use it.
Thanks!

position: fixed is what you want. This causes the element to be removed from the flow entirely and stay in the same position even after scrolling the page.
position: absolute is similar, but it only removes an element from the flow. Scrolling a containing div (or in this case, the whole page) will still cause it to move.
I opened up your web page in Chrome, and changed the styles for #navigation to:
background: white;
height: 100%;
text-align: center;
position: fixed;
width: 18.72%;
This does what you want. You will just need to position the rest of the content to the right.

Related

Why is my websites navigation bar overlapping content on the mobile version

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.

Prevent fixed sidebar menu to scroll over footer

Hi is there a simple way to prevent a fixed sidebar som scrolling over a footer or a specific element? I've tried changing it from fixed to absolute depending on different viewport height but my application is nested in a lot of position relative elements so I haven't managed to get it to work yet.
Here is a code example: https://codesandbox.io/s/fixed-sidebar-7gvpf?file=/src/index.js
Ask if I need to clarify anything.
Thanks beforehand,
Erik
Because the element is fixed and therefore outside the normal page flow you can z-index to specify if an element is above or below another.
In your case you can use it like this with z-index: -1; so it wil be positioned behind the element.
const SideBar = styled("div")`
background-color: green;
height: calc(100vh);
width: 50px;
position: fixed;
z-index: -1;
`;
If this causes the sidebar to disappear behind everything you also can set the z-index on the footer with position: relative; to get it to work. like the following CSS:
const Footer = styled("div")`
background-color: blue;
height: 200px;
position: relative;
z-index: 1;
`;
Here is an MDN article on z-indexes if you want to know more
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index

fixed header, then scroll with content

I have a layout that is to start with a fixed header, containing a logo, etc.
Further down the page is content.
The fixed header should stay fixed as the user starts to scroll, but then as the content scrolls up the screen and comes close to touching the fixed header area, then the fixed header scrolls off the screen along with the content.
I have managed to sort of get this working using the following:
<script>
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop() >= ($("#headerarea").height() + 85)) { $("#headerarea").removeClass("header-fixed"); $("#headerarea").addClass("header-scroll"); } else { $("#headerarea").removeClass("header-scroll"); $("#headerarea").addClass("header-fixed"); }
});
});
</script>
My CSS includes:
.header-fixed {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 140px;
z-index: 150;
}
.header-scroll {
position: absolute;
top: 225px;
left: 0px;
width: 100%;
height: 140px;
z-index: 150;
}
This allows the header area to stay fixed until the page scrolls to within 85 pixels of the header area, and then the header becomes normally scrolling with the rest of the page content.
This seems to work ok if I scroll the page using the scrollbar slowly.
But if I scroll quickly, or use a mouse wheel, then the header 'jumps' a lot.
Like when using the mouse scroll wheel, the header will jump down the page with the scrolling content, past the position it should stay fixed, then it will see that it has passed that position and jump back up to the fixed position again. This doesnt look good at all.
But I cant think of any other way to get this same effect.
Any suggestions on how to get this working better?
EDIT: Position:sticky seems to work, but I would ideally like to have a solution that will also work on IE, which position:sticky wont do.
Have you looked into position: sticky;? I think it's describing a lot of what you want here. Notably, the sticky stuff will go back to scrolling with the rest of the content once its parent div is outside of the viewport. https://css-tricks.com/position-sticky-2/

Is it possible to use the page scrollbar to scroll an inner div?

I have a website that has a fixed height and a scrollable div inside that. Is it possible to remove the inner scrollbar and change it to the pages' one? The current example with the scrollbar inside the div is here.
I suspect this might need to be done with Javascript and a search on Stack Overflow shows a number of entries referring to it but I'm kind of hoping it doesn't need to be done using Javascript.
Currently, I just let the users scroll inside the div but it's not really an elegant solution:
.singlepost {
position: fixed;
top: 270px;
bottom: 20px;
background-color: white;
padding-left: 20px;
padding-right: 20px;
overflow-x: hidden;
}
You could set every other element on the page to position: fixed, leaving your div to expand the body and make it scrollable. Check the fiddle for an example:
http://jsfiddle.net/GYatesIII/TnzG5/4/
The Next Web uses a similar tactic.
Looking at your demo page, it may be easiest to just put everything above into a div, which floats on top and whatever goes below scrolls up beneath the top div. That would keep your nav at the top and the rest of the page scrolling as usual, using the main windows scrollbar.

Making a scrolling menu using positon: fixed;

I'm making a website (http://www.deayoga.ch/), and I'd like to make the menu bar on the left scroll with the page. In other words, it would start on the page as it is, and then, when the user scrolls down, it would stay fixed, relative to the browser window. The idea comes from the links on the right hand side on some StackOverflow pages, like here.
How could I achieve this?
PS: I already know how to make a div stay fixed on the left, using position: fixed; left: 0;, but my question is how to do this in the middle of the page, without knowing the distance from the side of the window (since the page sits in the middle, regardless of window size)
Remy Sharp has a very nice tutorial (with video) on how to do exactly this:
http://jqueryfordesigners.com/fixed-floating-elements/
Sounds like a math problem... use JS to get the window size, divide by two to get the mid-point, subtract half the size of your fixed div from the mid-point value, then set your CSS position "left" value to that.
Add this tto your stylesheet instead of the class you have now for #leftcol
#leftcol {
position: fixed;
top: 50%;
margin-left: 20px;
margin-top: -150px;
text-align: center;
}
Then add the following to your #container class:
position: relative;
Your menu is now in the middle of the page. You might need to reposition the content though... just add a margin.

Categories

Resources