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?
Related
When I created navbar on my project I noticed that I can scroll on the website
and what I decided to do is to can noscroll function when the user will open navbar
function noscroll() {
window.moveTo(0, 0);
}
function menutoggle() {
if (menuItems.style.maxHeight == '0%') {
menuItems.style.maxHeight = '30%';
window.addEventListener('scroll', noscroll);
} else {
menuItems.style.maxHeight = '0%';
// How can I unable to scroll here?
}
}
one solution can be:
while nav is open wrap it with another div and then make that div position absolute. Hence it will be outside of the document flow. then give it a height of 100vh width 100vw. After that place, your main nav bar as you like inside the parent div.
This would work I suppose:
function noScroll() {
window.scrollTo(0, 0)
}
window.addEventListener('scroll', noScroll)
Setting the value to scroll, the overflow is clipped and a scrollbar is added to scroll inside the box. Note that this will add a scrollbar both horizontally and vertically (even
if you do not need it):
overflow: scroll;
use of overflow
On a project I'm working on, the homepage features its own unique hero image, while the remaining sub-pages will feature a generic image.
I'm trying to add and remove classes (that will fix the position of a nav bar and include padding on the hero) based on the current scroll position.
I can seem to get it going on the homepage, but not on the sub pages. Here's the code:
<script>
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
// Get the navbar
var navbar = document.getElementById("navbar_cont");
var media = document.getElementById("media");
var innerMedia = document.getElementById('media_inner');
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
media.classList.add("stickyPad");
innerMedia.classList.add("stickyPad");
} else {
navbar.classList.remove("sticky");
media.classList.remove("stickyPad");
innerMedia.classList.remove("stickyPad");
}
}
</script>
I can get classes added and removed for navbar and media, but not for innerMedia. If I swap the order of media and innerMedia however, I can now get it to work with innerMedia but not media.
Any clues would be appreciated!
Jason
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.
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.
I am trying to figure out how to get this sliding navigator bar effect: http://manoscrafted.com/. I can get as far as fixing the top hero image and sliding the bottom nav bar up and down, however, it doesn't stick to the top.
Is this done through JavaScript or am I missing something in CSS?
Thanks!
Achieved using JavaScript, most people would call this "parallax" scrolling with a "fixed" or "sticky" header/navigation
See parallax examples:
http://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/
See sticky/fixed examples:
http://jsfiddle.net/tovic/2jqCA/
var win = $(window),
fxel = $('nav'),
eloffset = fxel.offset().top;
win.scroll(function() {
if (eloffset < win.scrollTop()) {
fxel.addClass("fixed");
} else {
fxel.removeClass("fixed");
}
});