Jquary navbar change when section (DIV) is view-able in window

[LeeK]

I would like my navbar to change color when certain divs are visable in the window like:
https://departures-international.com/

I tried writing some code but this didn’t work
// JavaScript Document
(function ($, Drupal) {
//add drupal 7 code
Drupal.behaviors.fancy_scroll = {
attach: function(context, settings) {
//end drupal calls

$(document).ready(function(){
$(window).scroll(function(){
var top1 = $(“.header”).css.offset().top;
var top2 = $(“.page__title”).css.offset().top;
var top3 = $(“#media-wrapper”).css.offset().top;
if (scrollPos >= top1 && scrollPos = top2 && scrollPos = top3) {
$(“.region-navigation”).css(“background-color”, “#46a7ed”);
}
})
})
}
};
})(jQuery, Drupal);

This worked but it didn’t provide me with enough navbar changes.
// JavaScript Document
(function ($, Drupal) {
//add drupal 7 code
Drupal.behaviors.fancy_scroll = {
attach: function(context, settings) {
//end drupal calls
$(document).ready(function(){
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll > 1300) {
$(“.region-navigation”).css(“background” , “#46a7ed”);
}
else{
$(“.region-navigation”).css(“background” , “#7a797a”);
}
})
})
}
};
})(jQuery, Drupal);

I tried this code to give me more section options, but this didn’t work.
// JavaScript Document
(function ($, Drupal) {
//add drupal 7 code
Drupal.behaviors.fancy_scroll = {
attach: function(context, settings) {
//end drupal calls
$(document).ready(function(){
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll > 1300) {
$(“.region-navigation”).css(“background” , “#46a7ed”);
}
if else (scroll > 200) {
$(“.region-navigation”).css(“background” , “#000”);
}
if else (scroll > 0) {
$(“.region-navigation”).css(“background” , “#7a797a”);
}
})
})
}
};
})(jQuery, Drupal);

[Shikkediel]

From a first glance at the top bit of code, .css doesn’t do anything and should give a error:

$('.header').css.offset().top;

This is the correct format:

$('.header').offset().top;

The code at the bottom won’t work because of if else – that should say else if…

Edit – multiple errors here as well:

if (scrollPos >= top1 && scrollPos = top2 && scrollPos = top3) {

This condition won’t ever be true unless top2 and top3 have the same value. Besides that, comparison syntax is different:

if (scrollPos >= top1 && scrollPos == top2 && scrollPos == top3) {

Some purists would suggest to even use scrollPos === top2.

[LeeK]

Thank you for your help Shikkediel!!!

However, after making those changes I still didn’t get the result.

But I made some other fixes and got it working. I couldn’t have done this without your help!!!

See the working code:

https://codepen.io/leeKN/pen/XZvMVJ

[LeeK]

The problem i am having now is the coordinates are slightly off, I am trying element.getBoundingClientRect(x,y); with little success

https://codepen.io/leeKN/pen/WMVjmw

[Shikkediel]

Could you maybe add the HTML and relevant CSS as well so the code is fully working? That way I might be able to figure out why the coordinates are off. It should normally work as expected…

Although jQuery is also JavaScript, it has its own methods that can’t be directly used back and forth on the elements. The correct way to write the syntax for getBoundingClientRect while using it on a JQuery object is like this:

var top1 = $('.header')[0].getBoundingClientRect().top;

Where $('.header')[0] replaces element.

[LeeK]

That’s it, 100% perfect!! Thank you so much. So its the addition of the [0] that I missed. I updated the code:

https://codepen.io/leeKN/pen/WMVjmw

[Shikkediel]

Could a mod restore my rejected post please? Thanks in advance.

@Paulie_D

@Senff

[LeeK]

Hi Shikkediel

I had a play with the code … I haven’t fully tested it but it seams to be working very well.

https://codepen.io/leeKN/pen/BYXYyv?editors=1010

[Shikkediel]

Ah, you already saw it before I made the edit. Cool. Let me know if there are any glitches, I only put the code together “theoretically”.

[Author]

Posts