Sticky sidebar with sticky navbar - javascript

I am trying to make a layout that has the following desired behaviour:
The red bar indicates where I want the sidebar to "stick". Currently I have a header and when the page scrolls the nav bar below it sticks to the top of the page. Then the header and the sidebar continue scrolling. When the sidebar is at the end of the length it sticks at the bottom. Then when the main content (consisting of individual posts) is at the end the footer comes and "pushes" the bottom of the sidebar up.
Then when scrolling back up, the same happens in reverse (preferably with the sidebar scrolling up until the top of it is in view and then sticks to the top below the navbar).
Currently I have almost all of the desired behaviour by using the sticky-kit plugin, but I can't make it so that the sidebar sticks to just below the navbar instead of the top.
A link can be found here if needed.
Current jQuery:
$(document).ready(function(){
$('nav').clone().addClass('scroll').prependTo('#wrapper');
$("#aside").stick_in_parent();
});
var nav = $("nav");
var pos = nav.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top) {
$('nav.scroll').fadeIn(0);
} else {
$('nav.scroll').fadeOut(0);
}
});
Markup
<div id="wrapper">
<header></header>
<nav></nav>
<div id="aside"></div>
<div id="posts"></div>
</div>

Solved the problem by using the plugin's offset_top option. It didn't work initially when I had $("#aside, #posts").stick_in_parent(); but when I changed it to $("#aside").stick_in_parent(); it worked.

Related

After div is scrolled to the end the whole page becames scrollable

I have two divs:
<div id="slide1">
<div id="wrapper">
What I want to do is that when the page is loaded wrapper in fixed position and it only becomes static when slide1 div is scrolled to the bottom which is partly hidden under wrapper div and if I scroll up wrapper becomes fixed again. Furthermore, when slide1 is scrolled to the bottom I want to make it go up with wrapper div together nice and smooth without any jumping and responsive also.
I have made this javascript code and it worked almost fine but was not responsive (I don't remember exactly how I thinked of if statment it was quite long time ago):
$(window).scroll(function() {
var a = $(window).scrollTop();
if(a*2 >= ($(window).height())+900) {
$(".wrapper").css({'position' : 'static' });
$("#slide1").css({'height' : 1600});
} else {
$(".wrapper").css({'position' : 'fixed' });
$("#slide1").css({'height' : 2000});
}
});

I have a navigation bar that becomes fixed when you scroll down. It doesn't work unless you're scrolled down

So I figured out how to make it fixed, etc:
HTML:
<div id="header_nav">
<nav>
<ul class="navi">
<li>Home</li>
... Stack overflow wont let me add more code, but there are more links, etc
JS:
var elementPosition = $('#header_nav').offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top) {
$('#header_nav').css('position', 'fixed').css('top', '0');
} else {
$('#header_nav').css('position','static');
}
});
My navigation bar is supposed to have hover effects when you hover over each selection. The hover effects only work after the transition to it being fixed at the top is complete. The links are also not clickable. I tried playing around with the JS but I can't figure it out. It's as if the bar is only saved as an image until you scroll all the way down.
Full code is here: http://liveweave.com/XGPWVt
Move the <div id="wrapper"> section inside the <header> tag.
Updated example: http://liveweave.com/aGN9YV
It works if you change static to relative as well

Sticky sidebar is jolty if its shorter than the window height?

I have a sticky sidebar that when you scroll becomes fixed when the bottom of the sidebar is in view.
If the sidebar exceeds the length of the page as it does in this demo all works fine when you scroll and is exactly what you would expect.
However if the sidebar is shorter than the window height as in this demo, it seems to be jumping when you scroll and I can't work out how to get it to stop jumping and to be smooth. In other words it should only be fixed when the base of the sidebar hits the base of the window.
I'm not great with jQuery so any help would be greatly appreciated.
$(function () {
if ($('.leftsidebar').offset()!=null) {
var top = $('.leftsidebar').offset().top - parseFloat($('.leftsidebar').css('margin-top').replace(/auto/, 0));
var height = $('.leftsidebar').height();
var winHeight = $(window).height();
var footerTop = $('#footer').offset().top - parseFloat($('#footer').css('margin-top').replace(/auto/, 0));
var gap = 7;
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y+winHeight >= top+ height+gap && y+winHeight<=footerTop) {
// if so, ad the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top', winHeight-height-gap +'px');
}
else if (y+winHeight>footerTop) {
// if so, ad the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top', footerTop-height-y-gap + 'px');
}
else {
// otherwise remove it
$('.leftsidebar').removeClass('leftsidebarfixed').css('top', '0px');
}
});
}
});
Is it possible to combine the two instances? So if its shorter stay relative till the sidebar reaches the bottom, then act as it is now if the sidebar is longer?
The code works just as intended. This is actually a conceptual problem.
Picture how it would work first. The way you described it working seems to be exactly how it's working in your demo. When the sidebar is longer than the page, the scrolling page reaches the bottom of the sidebar before the leftsidebarfixed is added. That would be impossible with a shorter sidebar.
You may want to consider fixing the sidebar to the top, instead of the bottom (as most websites with sticky sidebars do) or having a taller header, so that the sidebar starts at the bottom.

How can I hide or scrolling my fixed social sidebar when it reaches to the footer part?

I want to make my social sidebar in the left side scrolling or hide when it will reach to the footer part. So how can I do it please ? Thanks.
If you want to make the floating social bar on the left to hide when an element i.e. the footer, is visible within the viewport of the browser, you can compare the top offset of the element with the bottom position of the browser's viewport. For example,
$(document).ready(function(){
$(document).scroll(function(){
var footerSelector = '#wrapper-12';
var socialBarSelector = '.pw-float-left';
var bottomViewPort = $(window).scrollTop()+$(window).height();
var footerTop = $(footerSelector ).offset().top;
if( bottomViewPort>=footerTop){
$(socialBarSelector).fadeOut();
}else{
$(socialBarSelector).fadeIn();
}
});
});

javascript floating sidebar z-index

I'm using javascript to have a sidebar stay visible as the page scrolls. the side bar only becomes fixed once the page scrolls to the top of its container. here is the code:
<script>
function moveScroller() {
var a = function() {
var b = $(window).scrollTop();
var d = $("#featured-scroller-anchor").offset({scroll:false}).top;
var c=$("#featured-scroller-content");
if (b>d) {
c.css({position:"fixed",top:"5px"})
} else {
if (b<=d) {
c.css({position:"relative",top:""})
}
}
};
$(window).scroll(a);a()
}
</script>
This works great except that I also have a footer at the bottom of the page that I want to be visible infront of the sidebar. Currently the sidebar is displayed above the footer and I can't figure out how to change that.
I have the footer with a z-index of 999 and I tried setting the z-index of #featured-scroller-content to something less but that didn't work. the only thing that will work is if I set the z-index of the sidebar to -1 but then none of the links in the sidebar work anymore.
Does the footer have position: relative?

Categories