I have built a one page site using scrollto and scrollspy. The page works great once the navbar gets fixed to the top. But if you click on any links before the navbar gets fixed to top all the links are off. And there is no consistency in the height that they are off. I have played around with the offset, I do have a padding of 100px to each section to account for spacing issues.
Here is a link to the dev site...
http://23.23.170.24/aspire/
Here is the js...
$(document).ready(function(){
$(window).scroll(function(){
var window_top = $(window).scrollTop() +1; // the "12" should equal the margin-top value for nav.stick
var div_top = $('#checkdiv').offset().top;
if (window_top > div_top) {
$('nav.navbar').addClass('navbar-fixed-top');
$('section').addClass('scrolled');
} else {
$('nav.navbar').removeClass('navbar-fixed-top');
$('section').removeClass('scrolled');
}
});
$(".click").click(function(evn){
evn.preventDefault();
$('html,body').stop(true).scrollTo((this.hash, this.hash),1000, {axis: 'y', offset :0});
return false;
});
$('body').scrollspy({ target: '#navbar' })
});
When the header is stuck, Bootstrap scrollspy and scrollto are automatically taking into account the height of the header. When unstuck, all you have to do is subtract the height of the header and you'll scroll to the correct spot on your page.
Related
On the mobile version of the site, the sticky nav appears after you scroll past the header, however once this appears, you can't scroll back up to the very top of the page because the nav won't unstick. What do I need to change to allow me to scroll to the top of the page?
$(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, .nav-header .genesis-nav-menu, .nav-small .genesis-nav-
// Sticky Navigation
var headerHeight = $('.site-header').innerHeight();
var beforeheaderHeight = $('.before-header').outerHeight();
var abovenavHeight = headerHeight + beforeheaderHeight - 1;
$(window).scroll(function(){
if ($(document).scrollTop() > abovenavHeight){
$('.navigation-container').addClass('fixed');
$('.nav-primary').addClass('fixed');
$('.nav-secondary').addClass('fixed');
} else {
$('.navigation-container').removeClass('fixed');
$('.nav-primary').removeClass('fixed');
$('.nav-secondary').removeClass('fixed');
}
});
You might want to use position: sticky instead of JS to do your sticky menu.
I'm trying to fix a problem on this template:
https://codepen.io/eksch/pen/xwdOeK
The highlighting effect on the navigation menu only works on a reduced browser height, if I resize the window to full screen (https://codepen.io/eksch/full/xwdOeK) and scroll down to section 7, the link on the navigation menu will not be highlighted. (I'm viewing from a 27 in imac)
In the javascripts, I believe this funciton controls the link highlight:
$(window).scroll(function() {
var scrollDistance = $(window).scrollTop();
// Show/hide menu on scroll
//if (scrollDistance >= 850) {
// $('nav').fadeIn("fast");
//} else {
// $('nav').fadeOut("fast");
//}
// Assign active class to nav links while scolling
$('.page-section').each(function(i) {
if ($(this).position().top <= scrollDistance) {
$('.navigation a.active').removeClass('active');
$('.navigation a').eq(i).addClass('active');
}
});
}).scroll();
Is there a way that I change the code to adapt to all screen size? And how should I make the section interactive with bootstrap?
I'm stil new to front-end development, appriciate for any help!
Fix your if statement:
if ($(this).position().top - $(this).height() <= scrollDistance)
There are tonnes of tutorials / examples of making a header stick on scroll for fixed height headers. However, I am working on a one page website and the initial section is a full screen image. The user then scrolls down to reveal the header and other content areas.
So my question is, how can I change my code to take into account the viewport / screen size - rather than use a fixed header size?
My existing code is:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 65) {
$(".main").addClass("sticky");
} else {
$(".main").removeClass("sticky");
}
});
You could use the height of the window instead of a fixed value (since you're talking about a full screen image, I'm guessing its height is equal to the window height):
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= $(window).height()) {
$(".main").addClass("sticky");
} else {
$(".main").removeClass("sticky");
}
});
You could also get the height of the first section, if it's smaller than the window
I don't know if there's a better solution, but here's my solution :
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= $(window).height()*0.2) { //0.2 for 20% of the viewport height, you can change this value if you need to
$(".main").addClass("sticky");
} else {
$(".main").removeClass("sticky");
}
});
I just used $(window).height() to get the viewport height.
I have a sidebar on my site that is fixed to the side and when the user scrolls down or up, the style attribute top is changed so that the height is adjusted.
$(window).scroll(function() {
if ($(this).scrollTop() < 125){
var v = 125 - $(this).scrollTop();
$("#sidebar").css({'top':v + 'px'});
}
if ($(this).scrollTop() >= 125)
{
$("#sidebar").css({'top':'5px'});
}
});
However, when I scroll down, the sidebar seems to jump uncontrollably and does not stick to the screen as I would like. I am using Chrome 32 so I don't see what the problem is. Please can someone help me with this issue.
Check out this fiddle.
Create a CSS class called fixed.
.fixed {
position: fixed;
top: 0px;
}
On scroll, in your JavaScript add and remove the "fixed" class accordingly to make the proper effect.
JavaScript:
$(function () {
var $sidebar = $('#sidebar');
$(window).on('scroll', function () {
if($(this).scrollTop() < 125) {
$sidebar.removeClass('fixed');
} else {
$sidebar.addClass('fixed');
}
});
});
As the header scrolls out of the window, the sidebar gets the "fixed" class and sticks to the side of the screen at the top left (0,0) respectively. When the header is coming back into view, the class is removed and the sidebar moves gracefully back to it's original position.
I have the following fiddle: http://jsfiddle.net/yFjtt/1/
The idea is that the user can scroll PAST the header to make the sidebar 'stick' in place while they scroll further down the page.
As they near the bottom of the page it should then work out how much space is left and how much space the sidebar needs and the add some negative margin to move the sidebar upwards whilst maintaining the fixed position.
Upto here it all works fine.
The next problem is making sure that the sidebar only moves up as far as it needs to and should remain about 10 pixels from the bottom. This way the sidebar will be fixed until it needs to move upward to reveal its content and then once it's all shown become stuck again about 10 pixels from the bottom.
Here is where I have tried to achieve this (see fiddle for full code):
if( $(window).scrollTop() > (documentHeight - sidebarHeight) ) {
if( offsetBottom < 10) {
}
else {
$('div.sidebar').stop(true,false);
$('div.sidebar').animate({'margin-top':offset}, 300);
}
} else {
$('div.sidebar').stop(true,true);
$('div.sidebar').css({'margin-top':'0'});
}
However the sidebar STILL moves too far up the page... Can anyone help? I'm sure it's just a simple mistake working out the offset from the bottom.
I think you had a good try, except I'm not sure what those animations are doing there. Basically you need 3 checks, first to see if the use is above the header, second to check if they're between the header and the bottom most limit for the sidebar, and lastly if they're below that point. Then simply swap and change classes and modify top value as necessary.
jsFiddle
var sidebarHeight = $('div.sidebar').height();
var documentHeight = $(document).height();
var headerHeight = $('div.header').height();
$(window).scroll(function() {
var margin = 10;
var sidebar_offset = documentHeight - sidebarHeight - (margin * 2); // double margin to account for top and bottom margins
if ($(window).scrollTop() > headerHeight && $(window).scrollTop() < sidebar_offset ) {
// below header, but above the sidebar offset limit
$('div.sidebar').addClass('fixed');
$('div.sidebar').css('top', '');
}
else if ( $(window).scrollTop() <= headerHeight ) {
// above header
$('div.sidebar').removeClass('fixed');
$('div.sidebar').css('top', '');
}
else {
// past the sidebar offset limit
$('div.sidebar').removeClass('fixed');
$('div.sidebar').css('top', documentHeight - sidebarHeight - margin);
}
});