Develop Reference

CSS `Position: Fixed` Not Moving On Scroll

I tried to put a position: fixed on the div ".ais-search-header", but it does not move while on scroll. I also try to drag it out from the parent div, but still did not work.
URL: https://kickegg0.myshopify.com/search.searchdata?q=q
Pass: tweast

There is a bug in Chrome and Firefox where position: fixed does not position relative to the screen when there is an ancestor element with the transform or backface-visibility attributes (or their webkit equivalents) set.
Move the element you want absolutely positioned above the elements with those attributes.

A position: fixed element has no dependency to its parent container. Its position actually depends on the browser window. That means it won't move or scroll on page scroll. It will be on top of the page. But those under that element will scroll according to the page. If you want to move the container according to scroll, give it position: absolute like:-
#parent {
position: relative;
}
#container {
position: absolute;
}
So that it will be inside the container and will move on page scroll.

Position 'fixed' positioning is based on your browser window so not move with scrolling. if you want to move with scrolling use position 'absolute'

Can't get fixed div to stop above the footer, what am I missing?

I have a side bar div that is fixed until a certain scroll/page height and then it becomes position:absolute.
My problem is that, when it loads in, it's at the right position and height, until I scroll and then it moves (partly due to the jQuery function). When it moves however, it makes it so it doesn't stop at the footer, but instead continues past it.
I am building this on a COS so I can't exactly recreate the problem in JSFiddle, but I can link you to the page.
CSS
/*fixed/absolute div*/
.widget-type-post_listing{
right:0;
width:50px;
position:absolute;
display;block;
background:yellow;
height:50px;
}
jQuery
$(function(){
var container = $('.widget-type-post_listing');
var minTop = $('.header-container-wrapper').outerHeight();
var maxTop = $('.footer-container-wrapper').offset().top - container.outerHeight();
$(document).scroll(function() {
container.css('top', Math.min( Math.max(minTop, $(document).scrollTop()), maxTop ));
});
});
Here is the JS Fiddle showing a working example: JSFiddle. You can see that the yellow box (fixed/abso.div) will stick on page until scrolling to footer.
As I said above, to see the exact problem, visit the working page: Working Page
Thanks for the help everyone!

You can add a div in between footer and header surrounding the yellow div 100% width position relative and then fix the max-height of that div and set it's display to inline-flex or inline-block. I think that should so the job.
Cover-div{
width: 100%;
display: inline-flex;
position: relative;
}

Go back to absolute positioning when scrolling up after changing to fixed position when scrolling down

I am working on a page that has a small navigation box on the left that I would like to be always visible as the user scrolls down. I'm using the below script to get that effect and it is working great except for one problem.
When I scroll back up the box does not revert back to its absolute position but keeps the fixed position which then overlaps the beginning banner. I'm new to this idea, any ideas or suggestions on how to make the div go back to it's original settings when the user scrolls up to that point?
$(window).scroll(function(){
if ($(window).scrollTop() >= 229){ //looking for the window to scroll to 229px in this example
$('.timeline').css({position:'fixed',margin:'-250px 0 0 50px'});
} else {
$('.timeline').css({position:'absolute'});
}
});
To see the page I am working on: http://embassyofrock.com/press

You're not unsetting the margin when you revert back to absolute. I would suggest adding/removing a class instead so you don't need to worry about resetting values.
Javascript:
$(window).scroll(function(){
if($(window).scrollTop() >= 229){
$('.timeline').addClass('fixed');
} else {
$('.timeline').removeClass('fixed');
}
});
CSS:
.fixed {
position: fixed;
margin: -250px 0px 0px 50px;
}

Scroll to top visibility

I'm new to Javascript and using Jquery and I ran into a problem.
I made a scroll-to-top button which should be visible when you start scrolling down. I got it to work, when I click it I smoothly scroll to the top and when you're at the top it disappears.
Only when I first load the page it's already visible, then when I scroll down it briefly disapears untill I reach the point where the element is located and it pops up again when you scroll down even more. Here is my code:
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('#backTop a').fadeIn();
}
else {
$('#backTop a').fadeOut();
}
});
$('#backTop a').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});

You'll also need to change the CSS of the button. By default, the element would be shown after all the elements before it in the HTML are displayed. You can change the CSS to ensure the element sticks to the bottom of the viewport always:
#backTop a{
position: fixed;
display: none;
bottom: 10px;
right: 10px;
}
Fixed positioning ensures that your div always stays at the same position. You can place the element by using the top, right, left and bottom rules. I've set the display to none because initially the back-to-top button should not be visible.

Making a sticky header stick to the top

I have managed to make a dropdown for a website I am designing and I'm a bit stuck on the sticky header part..
My header has the sticky effect however when i scroll down the header does not stick to the top of the page. It always maintains a margin of 80px from the top as i mentioned in the CSS.
How can i make the header stick to the TOP when i scroll and when i scroll back to the top of the page it should retain its original position. Hope i have made myself clear.
Just pasting my CSS as the HTML is too lengthy in the fiddle.
#nav, #nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
z-index:9998;
position:relative;
}
Check this fiddle for a DEMO I have created.
EDIT: Just to be clear. I want the top:80px to be there initially. I only want the header to stick to the top while scrolling. EXAMPLE

Here you go.
WORKING DEMO
Changes in CSS:
#nav {
position:fixed;
top:-40px;
}

You have some conflicting styles you need to get rid of:
http://jsfiddle.net/5GqYh/4/
Firstly, you had top inline your header, so I set it to 0.
I also adjust the top margin on your menu, that was also pushing it down.

Try these:
Remove this from ur css to make the header stick to the top.
#nav {
..
margin:40px auto;
..
}
2.css style for header - position:relative will do instead of position:fixed.
3.Put the content div inside another div and create a scrollbar only for that div. In that way, your header will always stick to the top.

Create a .sticky class on your CSS that makes the element's position fixed, then you can easily detect if the user scrolled enough to make it stick to the top, at which point you add the .sticky class to the element. Of course when the user scrolls all the way back you should remove the class. Example:
function stick() {
var stickyNavTop = $('.nav').offset().top;
var scrollTop = $(window).scrollTop();
if(stickyNavTop > scrollTop) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
}
$(window).scroll(function() {
stick();
});