We Keep Coding

Adding a class to a div when over a certain area / section

I am trying to change my navigation colour when it is over a dark header. I have managed to do this, but the page does not load in that state.
You can see it here, the navigation top left changes from white to black in respect of if it is over the dark top bar header or not.
http://www.pagedev.co.uk/clients/lotuslaser/
Here is my Jquery.
<script>
var header = $('#nav_list'),
blueSection = $('.full-header'),
// Calculate when to change the color.
offset = blueSection.offset().top + blueSection.height() - header.height();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
// Remove Class "dark" after scrolling over the dark section
if (scroll >= offset) {
header.removeClass('white-nav');
} else {
header.addClass('white-nav');
}
// Remove Class "no-shadows" whenever not on the top of the page.
if (scroll >= 1) {
header.removeClass('no-shadow');
} else {
header.addClass('no-shadow');
}
});
</script>
Any help would be great!
Another questions on the same matter... how do I also add another container into the mix, so that it can also change to white when it rolls over the black strip at the base of the page.
Thank you in advance.
Lee

i think the best way is to use Midnight.js Plugin

Display Tooltip if element is visible within the viewport

after a little advice. I'm working on my portfolio and I'm using a css transition to animate an element with some contact information which becomes active when the user scrolls up.
Within this element there is a figure class element called '.top-bar-avatar' which I have added a tool-tip and bounce animation too. This is all working but what I would like to achieve is for the tool-tip to automatically display and animation to fire when the figure is displayed within the web browser.
HTML
<li><figure class="top-bar-avatar"><img src="img/nick_avatar.png" alt="Top Bar Avatar Image Of Nick" title="Find Out More About Me" data-toggle="tooltip" data-placement="bottom"></figure></li>
JS
$('[data-toggle="tooltip"]').tooltip();
var lastScrollPosition = 0;
window.onscroll = function() {
var newScrollPosition = window.scrollY;
if (newScrollPosition < lastScrollPosition){
//upward code here
$('.top-bar').addClass('top-bar-animate');
}else{
//downward - code here
$('.top-bar').removeClass('top-bar-animate');
}
lastScrollPosition = newScrollPosition;
}
Tried a few different ways of doing this with yet to succeed. Any advice would be appreciated. Cheers in advance

I seem to have resolved this myself, i simply added and removed the display attribute and modified it's value within my existing code, see below.
Oh I also added a div id called 'profile-pic' to the image element, rather than focus on the figure class it's contained within.
var lastScrollPosition = 0;
window.onscroll = function() {
var newScrollPosition = window.scrollY;
if (newScrollPosition < lastScrollPosition){
//upward code here
$('.top-bar').addClass('top-bar-animate');
// display tool-tip when top-bar animates in
$('#profile-pic').tooltip('show');
}else{
//downward - code here
$('.top-bar').removeClass('top-bar-animate');
// hide tool-tip when top-bar animates out
$('#profile-pic').tooltip('hide');
}
lastScrollPosition = newScrollPosition;
}

Animating an element differently to slide in/out of view on scroll up / down

I'm working on a new portfolio for myself, using Bootstrap framework and I want to animate my slider based on the direction that the user is scrolling.
For example I already have an animation to slide the navbar class in. But as the user scrolls down the page I want to hide the navbar this is to give the user more visibility on the screen when browsing content. Then when they attempt to scroll back up the page I want to slide the .navbar class back in again.
Now I can easily get this to work if I target a specific element or pixel height, but that doesn't help me. I know it's achievable as I've seen it on several websites (LinkedIn for example).
So I'm wondering if it's a case of targeting positive or negative values on the y axis or something?

var lastScrollPosition = 0;
window.onscroll = function() {
var newScrollPosition = window.scrollY;
if (newScrollPosition < lastScrollPosition){
//upward - code here
}else{
//downward - code here
}
lastScrollPosition = newScrollPosition;
}

How can I make a content div slide over the header div as I scroll?

An example, http://www.laravel.com
I want to mimic this effect. I've seen it used a lot across the web lately, but I've never seen a tutorial covering how to create it.
Anyone happen to have some instructions or perhaps a tutorial on recreating this effect?

It's called parallax scrolling. You can do such things with skrollr.js.
And a great tutorial

There are plenty of examples and tutorials for sticky headers,
First link on google search for sticky header http://codepen.io/senff/pen/ayGvD
// Create a clone of the menu, right next to original.
$('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();
scrollIntervalID = setInterval(stickIt, 10);
function stickIt() {
var orgElementPos = $('.original').offset();
orgElementTop = orgElementPos.top;
if ($(window).scrollTop() >= (orgElementTop)) {
// scrolled past the original position; now only show the cloned, sticky element.
// Cloned element should always have same left position and width as original element.
orgElement = $('.original');
coordsOrgElement = orgElement.offset();
leftOrgElement = coordsOrgElement.left;
widthOrgElement = orgElement.width();
$('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement+'px').show();
$('.original').css('visibility','hidden');
} else {
// not scrolled past the menu; only show the original menu.
$('.cloned').hide();
$('.original').css('visibility','visible');
}
}

Change specific css styles through .animate()

I am currently coding my personal website and could really need some help with the jQuery.
I wanted the sticky navigation to change it's background color once it passes the header section, for that I've used the jQuery WayPoint plugin.
Then I defined some special css for the content above and the content under the header section. So far the background and font color changes, the .active class link and the color of the .navbar-brand however doesn't change.
Is something wrong in the following script?
$navbar.find('.navbar-brand').animate({color:'white'},500);
$navbrand.css({font-weight:"normal"});
$navbar.find('.navbar-brand').animate({color:'white'},500);
$navbrand.css({font-weight:"normal"});
If yes, then I'd really appreciate a explanation why it is not working.
Here is the full code:
$('#navchange').waypoint(function() {
var $navbar = $("#changenav");
var $navbrand = $("active > a:focus");
if($(window).scrollTop() < $('#navchange').css("top").replace("px", "")) {
// Above
$navbar.animate({backgroundColor:'transparent'},300);
$navbar.find('a').animate({color:'white'},500);
$navbar.find('.navbar-brand').animate({color:'white'},500);
$navbrand.css({font-weight:"normal"});
} else {
$navbar.animate({backgroundColor:'#FFFFFF'},500);
$navbar.find('a:link').animate({color:'#1abc9c'},500);
$navbar.find('.navbar-brand').animate({color:'#1abc9c'},500);
$navbrand.css({font-weight:"bold"});
}
});
And here is a link to my website.

You have some syntax errors.
You should quote the css attributes in .css.
$navbrand.css({"font-weight":"normal"});
$navbrand.css({"font-weight":"bold"});
You are also missing a period in your $navbrand selector.
var $navbrand = $(".active > a:focus");