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/
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.
I'm trying to figure out a way to position the brown chevrons such that as the it vertically stays at the center of the screen as the user scrolls but does't cut into either the header image or footer.
I know this can be solved with position: absolute, but I want to keep Bootstrap's responsiveness. How do I go about doing that?
Header
Footer
Use Jquery scrollTop to detect when you are at the top or bottom of the window, and then toggle different css classes for the element at different scrollpoints.
I also think you are looking for position "fixed" as opposed to "absolute".
$(window).scroll(function(){
if($(window).scrollTop() > 200){
$('selection').toggleClass("your-class");
} else {
$('selection').toggleClass("your-class);
}
})
.your-class {
position: relative;
margin-top: 200px;
}
selection {
position: fixed;
margin-top:50%;
}
Im trying have my header stick on scroll. The is a fixed with, 1160px and is located below another div, and I want it stuck at top on scroll. Problem is I cant do it with a fixed position.
Seems like every script solution requires it to be fixed?
Depending on what browsers you need to support, you could try position: sticky.
.sticky {
position: sticky;
left: 0;
top: 0;
width: 100%;
}
Codepen: https://codepen.io/afisher88/pen/xJaxoP
Browser support for position sticky: https://caniuse.com/#search=position%3A%20sticky
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.
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.