Develop Reference

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
});

jQuery scroll does not scroll up

I have this code below and the DEMO fiddle.
jQuery(document).ready(function () {
$(window).scroll(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});
});
I'm really confused why I can't scroll up? Anybody can explain to me why and please share some solutions you have.
Any help, is very appreciated.

Alright, this should do what you are asking for. I don't think it is very user friendly, but that is up to you.
Demo Fiddle
//this prevents the animate method from running multiple times.
var scrolling = false;
jQuery(document).ready(function () {
$(window).scroll(function () {
if ( $(window).scrollTop() <= 100 && scrolling === false) {
//set to true to prevent multiple scrolls
scrolling = true;
//run the animation
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000, function() {
//when animation is complete, set scrolling to false
scrolling = false;
});
}
});
});

You can't scroll up because your code is wrapped in the scroll() function so it basically locks its position every time you try and scroll with either the mouses scroll wheel or arrow keys. If you amend to the following then it will position itself accordingly when the page first loads.
jQuery(document).ready(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});

Are you trying to have it animate when the link is clicked? If so you need to change your code:
jQuery(document).ready(function () {
$('a').click(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});
});
I would probably add a class or ID value to your link so you can target that one specific link. The code above would apply to all links on your page...although right now there is only the one.
<h1>Scroll to the Content</h1>
jQuery(document).ready(function () {
$('.scrollToContent').click(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});
});

I'm not sure if you will satisfied on this but i found something that can help a little on my problem.
jQuery(document).ready(function () {
$(this).bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 < 1) {
$('html, body').delay(200).animate({
scrollTop: $('#content').offset().top
}, 1000);
}
});
});
DEMO

No need to add the jquery functionality to achieve the requirement that has been asked. Please remove the Jquery code and run the code snippet provided in the fiddle. It is behaving as per the requirement.

jQuery window width conditional not working

I'm having a bit of trouble with adjusting the code according to window width. If the window width is less than 450, I want it to scroll to a certain part, else another. Where am I going wrong?
$('.artist-kina').click(function( e ){
e.preventDefault();
$('html, body').animate({
if ($(window).width() < 450 {
scrollTop: $('#artists').offset().top - 60
}
else {
scrollTop: $('#artists').offset().top - 115
}
}, 500);
$('.artists-home').fadeOut(function() {
$('.kina-gallery').fadeIn('slow');
});
});

The parenthesis was a problem, but in a larger sense the syntax is just completely wrong:
$('html, body').animate({
scrollTop: $("#artists").offset().top - (
$(window).width() < 450 ? 60 : 115
)
}, 500);
You can't just drop an if statement into the middle of an object literal. You can, however, use the ? : operator to make a choice between values as part of an expression.
Now be aware that fooling around with the scroll position of the <body> may or may not work in all browsers. Safari used to have a problem with that; it may work in more modern versions of the browser.

There were several issues with the way that you nested the code, but the largest issue was the Animate call.
This should work:
$('.artist-kina').click(function( e ){
e.preventDefault();
if ($(window).width() < 450) {
$("html, body").animate({
scrollTop: $('#artists').offset().top-60
}, 500);
}
else {
$("html, body").animate({
scrollTop: $('#artists').offset().top-115
}, 500);
}
$('.artists-home').fadeOut('slow', function() {
$('.kina-gallery').fadeIn('slow');
});
});
Here is a working jsFiddle: http://jsfiddle.net/yy1v940u/5/

Why does scrollTop only scrolls half way down?

I have an error on a jQuery snippet and I am no jQuery expert. I have a scrolling div which will auto scroll with the following function.
// When DOM is fully loaded
jQuery(document).ready(function ($) {
function scroll(speed) {
$('.shooter-scroller').animate({
scrollTop: $(document).height() - $('.shooter-scroller').height()
}, fast, function () {
$(this).animate({
scrollTop: 0
}, speed);
});
}
speed = 15000;
scroll(speed)
setInterval(function () {
scroll(speed)
}, speed * 2);
});
I need to do 2 things with this script but would LOVE some help if people can help at all.
For some reason the scrolling stops halfway down the div and doesnt show all the content in the div and I would like to get the scroll to reset back to the top of the content once it has got to the bottom. Is this possible at all?
Any help would be amazing!
Fiddle: http://jsfiddle.net/andysimps1985/gn1a2kn7/1/
Thanks in advance.

You need to change
$(document).height() - $('.shooter-scroller').height()
to
$('.shooter-scroller').prop('scrollHeight')
That will give you the correct height.
See this jsfiddle (note: I changed the speed for a clearer result)

To get to the bottom you have to give the scrollTop as the element's height.
// When DOM is fully loaded
jQuery(document).ready(function ($) {
function scroll(speed) {
$('.shooter-scroller').animate({
scrollTop: $('.shooter-scroller').prop("scrollHeight")
}, fast, function () {
$(this).animate({
scrollTop: 0
}, speed);
});
}
speed = 15000;
scroll(speed)
setInterval(function () {
scroll(speed)
}, speed * 2);
});
This gets the scroll height.

scroll down function on click

below is the code I have for scrollTop. It works fine when I target a specific pixel, but I want to scroll down 300px, instead of scrollTop a certain div on click. can anyone help?
<div id="button"></div>
<div1 style="height:300px;">img1</div>
<div2 style="height:300px;">img2</div>
<div3 style="height:300px;">img3</div>
<div4 style="height:300px;">img4</div>
$(function() {
$("#button").on("click", function() {
$("html, body"). animate({"scrollTop":$().offset().top-300}, 1000);
return false;
});
});

Try using window.scrollBy(0,300);

$().offset().top doesnt do much of anything. Replace it with window.scrollY
$(function() {
$("#button").on("click", function() {
$("body").animate({"scrollTop": window.scrollY-300}, 1000);
return false;
});
});
Also negative is up and positive is down when we're talking about scrolling so you probably want to add 300 instead.

I think it's the best way.
var body = $('html, body');
$('#button').click(function() {
var n = $(document).height() - $(window).height();
body.stop().animate({scrollTop: n }, 1000, function() {
});
});