Forums

Give help. Get help.

  • # March 5, 2018 at 11:56 pm

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

    # March 6, 2018 at 12:19 am

    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.

    # March 6, 2018 at 3:48 pm

    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:

    # March 6, 2018 at 5:02 pm

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

    # March 6, 2018 at 5:58 pm

    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.

    # March 6, 2018 at 6:07 pm

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

    # March 6, 2018 at 7:58 pm

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

    @paulie_d
    @senff

    # March 6, 2018 at 11:45 pm

    Hi Shikkediel

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

    # March 7, 2018 at 12:05 am

    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”.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag