Fixing nav to top, then add margin to body - javascript

Currently using this:
$(function(){ // document ready
var stickyTop = $('.navigation-wrap').offset().top; // returns number
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stickyTop < windowTop) {
$('.navigation-wrap').addClass('sticky');
}
else {
$('.navigation-wrap').removeClass('sticky');
}
});
});
And that sticks the navigation to the top of the screen perfectly, however... when using the following:
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('navactive');
});
$(this).addClass('navactive');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
To highlight the current button depending on how far down the page you have scrolled. The problem is now that the 50px navigation is covering the top of the content. If you click on one of the buttons, the page scrolls down and covers the title.
Is there any way of adding a 50px margin to the code so the nav doesn't get in the way? I did try using offset, but couldn't get it to work.

Yeah, add more pixels in this line:
'scrollTop': $target.offset().top+2
For example:
'scrollTop': $target.offset().top+52
You can take a look at a similar solution I proposed.

Related

Using two ScrollTop() functions in jQuery?

I'm building a single page website which uses smooth scrolling to anchors for navigation. I'm also trying to add a 'back to the top' button but can't seem to get the animation working (clicking the button doesn't do anything). I believe it's because I'm using two scrollTop functions. Is this correct and how can I solve this?
// Smooth scrolling for page anchors
$(document).ready(function () {
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').animate({
'scrollTop': $target.offset().top
}, 1000, 'swing');
});
});
// Sticky back to top button
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 600) {
$('.go-top').fadeIn("500");
} else {
$('.go-top').fadeOut("500");
}
});
$('.go-top').click(function () {
$('html, body').animate({
scrollTop: 0
}, 800);
return false;
});
});
Found the solution - I had to removed the second $(document).ready(function () { line of code.

jQuery combine 2 scripts to achieve smooth scrolling to anchor

I have the following jquery function which shows / hides content depending on the div that is selected...
jQuery(document).ready(function() {
jQuery('.showSingle').on('click', function () {
jQuery(this).addClass('selected').siblings().removeClass('selected');
jQuery('.targetDiv').hide();
var selector = '#div' + jQuery(this).data('target');
jQuery(selector).show();
location.hash = selector;
});
});
http://jsfiddle.net/W4Km8/7944/
I also have the following script taken from http://1stwebmagazine.com/jquery-scroll-to-anchor-point
$(document).ready(function(){
$('a[href^="#"]').bind('click.smoothscroll',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top-40
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
I am trying to combine the 2 so that instead of jumping to the anchor it scrolls to it. Do I need to combine them or can they be made to work separate?
Looks like you can combine them easily enough, I've made it work with this jsfiddle: http://jsfiddle.net/9soxbhpj/
var target = jQuery(selector);
target.show()
$('html, body').stop().animate({
'scrollTop': target.offset().top-40
}, 900, 'swing', function () {
window.location.hash = selector;
});
You can add the scroll action in the same click call.
See the js:
jQuery(document).ready(function() {
jQuery('.showSingle').on('click', function () {
var _el = jQuery(this),
_target = jQuery('#div' + _el.data('target')),
_targetDiv = jQuery('.targetDiv');
_el.addClass('selected').siblings().removeClass('selected');
_targetDiv.hide();
_target.show();
// Scroll to object
$('html, body').animate({
scrollTop: _target.offset().top
}, 800);
});
});
Here is a working example.

fixed navigation bar overlaying content when position is given dynamically

I am trying to create a one page website with multiple sections. my problem is that once I click on a link in the navigation bar it scrolls to the item but covers part of the content.
the navigation is only given static positioning when scrolling past its original position (Hope that makes sense). here is a link to my dev site http://wp.matthewwood.me/
here is my code for adding the fixed positioning using JQuery. i tried offsetting it by -50px to accommodate for the fixed nav size but this has not solved the problem.
$(document).ready(function(){
var offset = $(".navbar").offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() >= offset) {
$('.navbar').addClass('navbar-fixed-top');
}
else {
$('.navbar').removeClass('navbar-fixed-top');
}
});
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top - 50}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
Any help would be appreciated
When you change from relative to fixed positioning, the block value of the div changes from it's height to zero. This causes the offset issue you are experiencing. See this fiddle here:
https://jsfiddle.net/7muk9zhh/5/
The main things that have changed:
JS:
$(window).scroll(function() {
if ($(window).scrollTop() >= offset) {
$('.navbar').addClass('navbar-fixed-top');
$("#Main").css("margin-top", $(".navbar").height()); //Compensates for fixed positioning
} else {
$('.navbar').removeClass('navbar-fixed-top');
$("#Main").css("margin-top", "");
}
});
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
var globOffset = $(".navbar").height(); //Acts as an offset for the fixed element
$('body').stop().animate({scrollTop: $($anchor).attr('href').offset().top - globOffset}, 1500);
event.preventDefault();
});
HTML:
There is one more problem. The "#home" anchor is used in body. So when finding the offset top for this, it returns 0 (offset of the body element).
Also I think the custom easing 'easeInOutExpo' requires jQuery UI (if that isn't working you need to include it):
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
Hopefully this answers your question!
Use this code: should work properly and has nice smooth scrolling effect:
$(document).ready(function(){
var offset = $(".navbar").offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() >= offset) {
$('.navbar').addClass('navbar-fixed-top');
}
else {
$('.navbar').removeClass('navbar-fixed-top');
}
});
//here it starts
$('a[href^="#"]').bind('click.smoothscroll',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top-90 //change value to your need
}, 1200, 'swing', function () {
window.location.hash = target;
});
});
//end
});

hash scrolling navigation with sticky header, offset not working on firefox

I have a website with a stick to top header, when scrolling, half of my header disappear and the menu stick to top.
the navigation uses hash, by clicking on a link of my menu, the page scrolls to the linked #.
I've added a jscript to calcul the height of my stickyheader to add this height to my #link so my target is displayed right under my menu.
it works perfectly on Chrome & safari, but in Firefox, there's a problem, the height is not added, so my title is displayed under the menu.
And when clicking to "back to top", the position is not correct, there's an offset... only on firefox also.
I don't know if you understand what I mean, so here is a jsfiddle to see it in action :
http://jsfiddle.net/rHmAA/3/
here is my js :
$(document).ready(function () {
$('a[href^="#"]').bind('click.smoothscroll', function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
var offset;
if($('#stickyheader').css('position') == 'relative'){
offset = $('#stickyheader').outerHeight(true)*2;
}else{
offset = $('#stickyheader').outerHeight(true);
}
$('html, body').stop().animate({
'scrollTop': $target.offset().top - offset
//--OFFSET--//
}, 1500, 'swing', function () {
window.location.hash = target;
});
});
});
$(function () {
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() === stickyHeaderTop+1) {
$('#stickyheader').hide();
console.log('p');
}
if ($(window).scrollTop() > stickyHeaderTop) {
$('#stickyheader').fadeIn(500).css('position','fixed');
$('#stickyalias').css('display', 'block');
var mT = $('#stickyheader').css('height');
$('#stickyheader').next('.post').css('marginTop', mT);
}else{
$('#stickyheader').css({
position: 'relative',
});
$('#stickyheader').next('.post').css('marginTop', '0');
}
});
});
can anybody help me with this ? I don't know what I am doing wrong,
thanks a lot for your help,
Try using this for the scroll animate
$('html, body').animate({
'scrollTop': $target.offset().top - offset
//--OFFSET--//
}, 1500);

jquery issues when changing active navigation class on scroll and on click

I'm doing a single page where navigation .active class should change both on scroll and on click. I'm also changing class of header when scrolling down (".large" and ".small"), but this two scripts somehow don't work with each other.
For header resizing I'm doing this:
$(document).on("scroll",function(){
if($(document).scrollTop()>200){
$('header').removeClass('large').addClass('small');
} else{
$('header').removeClass('small').addClass('large');
}
});
For change active class I'm doing this:
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#top-menu a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.
position().top + refElement.height() > scrollPos) {
$('#top-menu ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
This works perfectly when scrolling, but clicking on a top nav link just crashes "header" function and it doesn't resize anymore. Can anyone see what's the problem is?
As f00bar mentioned, $(document).off("scroll"); removes the eventhandler. The scroll event wont be fired anymore. so your top code wont run after a click.

Categories

Resources