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
Related
My homepage starts with a header (position: absolute) and a full-width slider.
I want the header to appear (position: fixed) when the user is scrolling towards the top of the page and moving back to absolute again when the scroll reaches the slider.
I have looked into at least 15 different StackOverflow and other websites similar question but I can't find a solution. Can someone help please?
function stickyHeader() {
let scrollPoint = window.scrollY;
let sliderHeight = jQuery('.swiper-home').outerHeight();
jQuery(window).scroll(function (){
if (scrollPoint > sliderHeight){
if(//scrolling towards top){
header.addClass("fixed-header");
} else {
header.removeClass("fixed-header");
}
}
})
}
window.addEventListener('scroll', stickyHeader);
I am trying to change my navigation colour when it is over a dark header. I have managed to do this, but the page does not load in that state.
You can see it here, the navigation top left changes from white to black in respect of if it is over the dark top bar header or not.
http://www.pagedev.co.uk/clients/lotuslaser/
Here is my Jquery.
<script>
var header = $('#nav_list'),
blueSection = $('.full-header'),
// Calculate when to change the color.
offset = blueSection.offset().top + blueSection.height() - header.height();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
// Remove Class "dark" after scrolling over the dark section
if (scroll >= offset) {
header.removeClass('white-nav');
} else {
header.addClass('white-nav');
}
// Remove Class "no-shadows" whenever not on the top of the page.
if (scroll >= 1) {
header.removeClass('no-shadow');
} else {
header.addClass('no-shadow');
}
});
</script>
Any help would be great!
Another questions on the same matter... how do I also add another container into the mix, so that it can also change to white when it rolls over the black strip at the base of the page.
Thank you in advance.
Lee
i think the best way is to use Midnight.js Plugin
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.
Let's get straight to it: When the user scrolls x amount, I want the sidebar to begin to move.. Now, once the sidebar reaches its' end, I want it to stay fixed and scroll to the footer. Here's what I got.
http://jsfiddle.net/Ajp44/
Here's my Javascript:
$(document).ready(function() {
// Cache selectors for faster performance.
var $window = $(window),
$sidebar = $('#anchor'),
$sidebarAnchor = $('#right');
// Run this on scroll events.
$window.scroll(function() {
var window_top = $window.scrollTop();
var div_top = $sidebarAnchor.offset().top;
if (window_top > div_top) {
// Make the div sticky.
$sidebar.addClass('stick');
$sidebarAnchor.height($sidebar.height());
}
else {
// Unstick the div.
$sidebar.removeClass('stick');
$sidebarAnchor.height(0);
}
});
});
For some reason JSfiddle isn't displaying what the Javascript is doing, but if you run it on your PC you can see. Whenever the user scrolls passed the ending of the sidebar, the sidebar doesn't scroll down with them like it is suppose to, instead, it jumps of to the right side of the page...
So my question is this: how do I stop the sidebar from jumping to the side of the page, and keep it within the restraints of the parent DIV?
Cheers!
Don't do right : 0 in your stick class. In fixed elements, the position attributes are relative to the viewport.
https://developer.mozilla.org/en-US/docs/Web/CSS/position#Fixed_positioning
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?