We Keep Coding

jQuery Navbar transition on scroll. How to adjust specific point of transition

In a site I'm building I'm trying to make the navbar change color when I scroll. However, I don't want it to change colors as soon as I start scrolling. I want it at a specified point (once I scroll past my jumbotron).
So far, I've only been able to make it work by scrolling from the top. I'm not quite skilled enough to figure out how to do it past a specific point on my page. I would greatly appreciate some guidance on this.
jQuery script
$(function () {
$(document).scroll(function () {
var $nav = $(".fixed-top");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
Thanks for any help or guidance!

There are a lot of ways you can do it.
one way could be done with pure javascript.
change changeColorValue that represents the scroll bar value according to your needs.
Here is my suggestion:
LIVE DEMO
JavaScript:
var changeColorValue = 50;
window.addEventListener("scroll", scrollAnim);
function scrollAnim () {
var val = getScrollVal();
if(val > changeColorValue)
{
document.getElementById('mynav').style.backgroundColor = 'red';
}
else
{
document.getElementById('mynav').style.backgroundColor = '#333';
}
}
function getScrollVal()
{
var val = $(document).scrollTop();
return val;
}

Scrolling Problem While Loading Data with AJAX

I am developing a website using PHP, MySQL, JavaScript (JQuery + Ajax), I used customer scroll function and scrollbars, the problem is that if I load data with ajax the scroll function generates hundreds of errors saying:"Uncaught TypeError: Cannot read property 'top' of undefined" from the scroll function which is:
function Scroll() {
var contentTop = [];
var contentBottom = [];
var winTop = $(window).scrollTop();
var rangeTop = 200;
var rangeBottom = 500;
$('.navbar-collapse').find('.scroll a').each(function () {
contentTop.push($($(this).attr('href')).offset().top);//The error rises from this line
contentBottom.push($($(this).attr('href')).offset().top +
$($(this).attr('href')).height());
})
$.each(contentTop, function (i) {
if (winTop > contentTop[i] - rangeTop) {
$('.navbar-collapse li.scroll')
.removeClass('active')
.eq(i).addClass('active');
}
})
}
and also the website starts blinking when I scroll to the end, I tried checking if the "contentTop.push($($(this).attr('href')).offset()" is not null, errors get disappear but web page still blinks at the end of the page.
If you can help, please share your answer, Thanks in Advance.

var winTop = $(window).scrollTop();. This line forces window to go to top of the page. This might be the cause for blinking effect.

How to stop hammer.js from conflicting with the normal scrolling

im using hammer.js to detect drags and swipes.
Thats the code:
var element = document.getElementById('pinwall-grid');
var hammertime = Hammer(element).on("drag", function (event) {
direction = event.gesture.direction;
if (direction == 'left') {
var $meN = $('.pinwall-grid .ctrl a.next');
if (!$meN.hasClass("nextD")) {
$meN.trigger('click');
}
console.log('left');
} else if (direction == 'right') {
var $meP = $('.pinwall-grid .ctrl a.prev');
if (!$meP.hasClass("prevD")) {
$meP.trigger('click');
}
console.log('right');
}
event.gesture.stopDetect();
});
If you swipe up and down on mobile and your finger is on the div i'm targeting using hammer.js, it dosnt scroll down or up the viewport.
Check http://86.62.248.112/en/ on mobile using chrome to see what im talking about, out your finger on the Latest News div and swipe.
How can i fix that?
Thanks in Advance.

If someone is facing the same issue,
first you need to update your version of hammer.js and then add touch-action:pan-y to the div in question.

Show id when div is halfway up

So I know how to actually get ids and classes and do the basics but I'm not sure how to do this:
"When the user scrolls down, the title of the post that takes up half the screen should be shown."
The setup is supposed to look something like this...
Any ideas?

You need to use JS and I used jQuery to do a simple prototype
It's all about listening to the scroll event and dealing with the offset of the elements from top you need to add a simple condition for the heights but now it's just working fine
$(window).scroll(function(){
var scrolledTop = $(this).scrollTop();
console.log(scrolledTop);
$(".blog").each(function(){
if($(this).offset().top < scrolledTop)
{
$('#blogname').html($(this).html());
}
});
});
Check out this http://jsfiddle.net/GkrCU/2/
I hope this can help :)

Here is my answer
$(window).scroll(function () {
var windowheight = $(this).scrollTop();
$(".blog").each(function () {
var sc = $(this).offset().top;
var id = $(this).attr('id');
if (sc < windowheight) {
$("#blogname span").html(id)
}
});
});
http://jsfiddle.net/GkrCU/1/

Page Scrolling jQuery Navigation

I am building a website which can be viewed here: argit.bounde.co.uk
I have done the majority of the content and I am now trying to work on the navigation. I have three navigation bars (only one is ever visible) and need this method to work no matter which is showing. If you resize your browser to make your window narrower that will show a second, and then when you scroll the navigation that appears is a third.
I have got it working to a fashion but the problem is when I click a link it jumps to where it wants to go momentarily, then returns and then scrolls as it is meant to. This is because of the "href="#target" that i have left in the nav. I have tried including a "return false" but then if the broswer doesnt support JS then the navigation doesnt work at all.
The next problem is I want a way to make the target "over". Currently when you click a link it scrolls to the selected one and the nav updates which link is "over" as it passes them. I want this for when the user is scrolling up and down the page, but if they click a link I want that link to be "over" (and the respective links from other navigations) and not be affected by the scroll checks that would normally override it.
The solution I am using for my onClick navigation is below, I know there are plug ins that will do this kind of thing but I want to write it myself so i can get a better understanding of jQuery. Im not sure if the solution I am using at the moment is a good one, if not please advise me:
function navigation() {
$('html, body').stop().animate({
scrollTop: $($(this).attr('href')).offset().top
}, 1500);
}
The solution I am using for the scrolling checks I found by accident and is below, It works by over riding the equation above it and is actually quite simple. There is also an action to fix the navigation when scrolling.
function navCheck() {
var documentHeight = $(document).height();
var windowHeight = $(window).height();
var windowTop = $(window).scrollTop() + 100;
var navTop = $("#scrollanchor").offset().top;
var mobileTop = $("#mobileanchor").offset().top;
var mobileHeight = $("#mobileanchor").height();
var overviewTop = $("#slider").offset().top;
var bioTop = $("#bio").offset().top;
var solutionsTop = $("#solutions").offset().top;
var experianceTop = $("#experiance").offset().top;
var contactTop = $("#contact").offset().top;
if($(window).scrollTop() > navTop) {
$("#leftfixer").addClass("leftfix");
} else {
$("#leftfixer").removeClass("leftfix");
}
if($(window).width() < 1200){
if(windowTop - 90 > mobileTop + mobileHeight) {
$("#mobilefix").slideDown();
} else {
if(windowTop - 96 <= mobileTop) {
$("#mobilefix").hide();
}
}
} else {
$("#mobilefix").slideUp();
}
$("li").removeClass("over");
$("li.navoverview").addClass("over");
if(windowTop > bioTop) {
$("li").removeClass("over");
$("li.navbio").addClass("over");
}
if(windowTop > solutionsTop) {
$("li").removeClass("over");
$("li.navsolutions").addClass("over");
}
if(windowTop > experianceTop) {
$("li").removeClass("over");
$("li.navexperiance").addClass("over");
}
if(windowTop > contactTop || windowTop > documentHeight - windowHeight) {
$("li").removeClass("over");
$("li.navcontact").addClass("over");
}
}
This is my first post here so if I have missed out any information Im sorry! I have also looked for similar posts but it seems most people go for a plugin when doing this kind of thing. Thank you
UPDATE: The page jumping to the anchor has been fixed

Normally, if you use JavaScript to scroll the page, you would put return false; after calling the function. This prevents the page from scrolling momentarily to the anchor.
Something like
function navigation() {
$('html, body').stop().animate({
scrollTop: $($(this).attr('href')).offset().top
}, 1500);
return false;
}