Develop Reference

Having the same nav bar become fixed after scrolling past a certain element

I currently have a nav bar within my header that I would like to become fixed after the user scrolls past a certain element. I would also like to achieve the same animation effect as seen at http://pixelmatters.com
When I say 'same' I mean using the same nav bar/header element that I'm using at the top, rather than using a duplicate somewhere else in my document.
I've tried to achieve he result with my own code shown below. I've also included a jsFiddle link of my current setup.
jQuery
var bottomElement = $('.dividerWrap').offset().top + $('.dividerWrap').height();
$(window).on('scoll', function() {
var stop = Math.round($(window).scrollTop());
if (stop > bottomElement) {
$('.header').addClass('isFixed');
} else {
$('.header').removeClass('isFixed');
}
});
https://jsfiddle.net/npfc8wsx/1/

I answered something like that few days ago. please take a look at this code:
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
var scrollToVid = $('#test').offset().top
console.log(scrollTop); //see window scroll distance //
console.log(scrollToVid); //see scroll to div offest//
if ($(window).scrollTop() >= scrollToVid) {
alert('You reached to the video!');
}
});
jSFiddle
Main Question
now for you some code must change:
$(window).scroll(function () {
var scrollToElem = $('.dividerWrap').offset().top
if ($(window).scrollTop() >= scrollToElem) {
$('.header').addClass('isFixed');
} else {
$('.header').removeClass('isFixed');
}
});

Back to Top Button Issue (Potentially)?

I've got a back to top button that shows up on my webpage that I'm working on. When you scroll down and sometimes when it's clicked it jumps to the top and then jumps back to where you were on the page and then smoothly scrolls to the top like it's supposed to. Keep in mind that it does not do this all the time. Would this just be a lag or glitch issue or if there some error in my script?
$(function(){
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 615) {
$('.ion-android-arrow-dropup-circle').addClass('show');
} else {
$('.ion-android-arrow-dropup-circle').removeClass('show');
}
});
$('.ion-android-arrow-dropup-circle').on('click', scrollToTop);
});
function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 500, 'linear');
};
Searched 40+ questions and couldn't find an answer. Only saying this because if you don't and somebody finds one they always say, "You should have looked before asking." I see it all the time.

ANSWER TO MY OWN QUESTION
After going so long without responses I had moved on and decided not to worry about this issue at that time. Today, I was working on a different site using the same jQuery script and was having the same problem. I decided to try and fix it myself since I couldn't find help on the issue.
The solution was simple! I don't know how I missed it the first time around. All I did is take the above code and add one function to it:
$('.ion-android-arrow-dropup-circle').click(function(event) {
event.preventDefault()
});
I forgot all about needing to remove the default action of clicking a link which is jumping to the destination. It now works perfectly smooth and looks great, just like I wanted to begin with!
My fully updated script for your reference:
$(function(){
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 50) {
$('.ion-eject').addClass('show');
} else {
$('.ion-eject').removeClass('show');
}
});
$('.ion-eject').click(function(event) {
event.preventDefault()
});
$('.ion-eject').on('click', scrollToTop);
});
function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 200, 'linear');
};

Modifying this scrolling nav menu script?

I am a noob and for a school project I was trying to create a single page site that had a static nav menu at the top that always stayed there and I wanted it to do an animated scroll effect when you click it's link. Someone here made this for me and it works perfect.
However, you notice it says .top - 98 and that is because my nav is 98px tall so that it doesn't cut off the section it's jumping to.
Now that I am getting into media queries, I may increase the height of that nav at certain breaks. So I am wondering, is it possible to change this from 98 to some sort of [nav current height] variable? So that it will work regardless of what the height of my nav is?
Thanks in advance!!
$(document).ready(function() {
$("nav a").on('click', function() {
var link = $(this).attr('href');
$('html,body').animate({
scrollTop: ($(link).offset().top - 98)
}, 'slow');
return false;
});
});

how about
$('html,body').animate({scrollTop: ($(link).offset().top - $('nav').height())},'slow');

Yes you can do that
scrollBarFunc = function(){
var myNavHeight = $("#myselectorId").height(); //just put here your id or class
$("nav a").on('click',function(){
var link = $(this).attr('href');
$('html,body').animate({scrollTop: ($(link).offset().top - myNavHeight)},'slow');
return false;
});
}
$(document).ready(function(){
scrollBarFunc();
});
$(window).resize(function(){
scrollBarFunc(); //recall function to work when you resize
});

How to repeat ScrollTop function to repeat after scrolling to each div?

Good evening everybody! Currently, on the site I'm working on (http://bit.ly/1eGCShX), I've got it to scroll down to each div all the way down, however after you've finished and click on the last one again, it doesn't scroll back all the way to the top (instead the previous div) and that's what I'm trying to accomplish.
However, I need it to repeat itself over again to start back from the first div, because if you finish it once and scroll up to click the first one again it stars where it left off. I've been messing with this for awhile and couldn't get it. Any help is kindly appreciated! Here is my JS;
$('div.section').first();
$('a.display').on('click', function(e) {
e.preventDefault();
var t = $(this).text(),
that = $(this);
if ($('.currentPanel').next('div.section').length > 0) {
var $next = $('.currentPanel').next('.section');
var top = $next.offset().top;
$('.currentPanel').removeClass('currentPanel');
$(function () {
$next.addClass('currentPanel');
$('html, body').animate({scrollTop: $('.currentPanel').offset().top }, 'slow');
});
} else if ($('.currentPanel').prev('div.section').length > 0) {
var $prev = $('.currentPanel').prev('.section');
var top = $prev.offset().top;
$('.currentPanel').removeClass('currentPanel');
$(function () {
$prev.addClass('currentPanel');
$('html, body').animate({scrollTop: $('.currentPanel').offset().top }, 'slow');
});of
}
});
And of course, the JSFiddle to make things x10 more easier! I've made a simplified version.
http://jsfiddle.net/dylanopet/ADsKH/9/
Again, appreciate for taking your time to read this and wish you all a positive week.

Where you have
var $prev = $('.currentPanel').prev('.section');
change it to
var $prev = $('.section').eq(0);
You were telling the function you wanted to scroll to the previous element. But you actually want to scroll to the first element.
Working example: http://jsfiddle.net/58ZMZ/

Making nav bar effects using scroll AND click in jQuery

I want a nav to highlight (or something similar) once a user clicks on it AND when a user scrolls to the corresponding section.
However, on my computer when one clicks on any of the nav events after3, only nav event 3 changes. I'm guessing this is because after one clicks on 4 or 5, the scroll bar is already at the bottom of the page, so 4 and 5 never reach the top. The only div at the top is post 3, so my code highlights nav event 3 and ignores the click.
Is there any way I can fix this? Ive tried if statements (only highlight nav event if it's at the top AND the scrollbar isn't at the bottom or the top isn't the last item).
Here is a more accurate fiddle, using a fix below showing what I am talking about. The fix now highlights on scroll, but if you click option 5, it will not highlight.
$('.option').children('a').click(function() {
$('.option').css('background-color', '#CCCCCC;');
$(this).css('background-color', 'red');
var postId = $($(this).attr('href'));
var postLocation = postId.offset().top;
$(window).scrollTop(postLocation);
});
$(window).scroll(function() {
var scrollBar = $(this).scrollTop();
var allPosts = [];
var post = $('.content').offset();
var lastPost = allPosts.legnth-1
var windowHeight = $(window).height();
var bottomScroll = windowHeight-scrollBar;
$(".content").each(function(){
allPosts.push($(this).attr('id'));
});
i = 0;
for(i in allPosts){
var currentPost = "#"+allPosts[i];
var postPosition = $(currentPost).offset().top;
if (scrollBar >= postPosition){
$('.option').css('background-color', '#CCCCCC');
$('#nav'+allPosts[i]).css('background-color', 'red');
};
};
});

I think you've overdone your scroll() handler, to keep it simple you just needs to check if the scrollbar/scrollTop reaches the '.contents' offset top value but should not be greater than its offset().top plus its height().
$(window).scroll(function () {
var scrollBar = $(this).scrollTop();
$(".content").each(function (index) {
var elTop = $(this).offset().top;
var elHeight = $(this).height();
if (scrollBar >= elTop - 5 && scrollBar < elTop + elHeight) {
/* $(this) '.content' is the active on the vewport,
get its index to target the corresponding navigation '.option',
like this - $('.Nav li').eq(index)
*/
}
});
});
And you actually don't need to set $(window).scrollTop(postLocation); because of the default <a> tag anchoring on click, you can omit that one and it will work fine. However if you are looking to animate you need first to prevent this default behavior:
$('.option').children('a').click(function (e) {
e.preventDefault();
var postId = $($(this).attr('href'));
var postLocation = postId.offset().top;
$('html, body').animate({scrollTop:postLocation},'slow');
});
See the demo.

What you are trying to implement from scratch, although commendable, has already been done by the nice folks at Bootstrap. It is called a Scrollspy and all you need to do to implement it is include Bootstrap js and css (you also need jquery but you already have that) and make some minor changes to your html.
Scrollspy implementation steps.
And here is a demonstration. Notice only one line of js. :D
$('body').scrollspy({ target: '.navbar-example' });