EzDevInfo.com

Android browser hiding bar which is position:fixed to bottom of screen

I have an 'account bar' fixed to the bottom of the screen using position:fixed and I'm auto hiding it when te user scrolls down the page using a plugin called headroom.js

This works perfectly on every browser except Android Browser (Samsung Galaxy Note 4 running Kitkat), because the Android browser has it's own toolbar at the bottom of the screen which is covering mine.

This wouldn't be a problem for most websites because when the user scrolls down the screen the android browser toolbar disappears, but unfortunately I am hiding my toolbar when the user scrolls down. When they scroll back up again my toolbar shows, but so does the browser toolbar over the top of it!

I can't think of a solution to this apart from moving the bar 40 pixels higher so it doesn't get covered. Unfortunately this would look ridiculous in all other browsers. Another option would be to browser sniff android browser and just not hide my toolbar ever, but browser sniffing seems old-fashioned. Feature detectin the prescense of a floaty browser toolbar is not possible though.

Any ideas would be greatly appreciated.

Headroom.js options with Enquire.js

I need to have different offset in Headroom.js depending on screen size.

Enquire.js should do the trick, but I can't get it work properly. It only loads one offset setting per page load, even though it's the right one on load, but it doesn't switch to another setting when I resize the screen.

enquire.register("screen and (max-width: 48rem)", {

  // REQUIRED
  // Triggered when the media query transitions
  // from *unmatched* to *matched*
  match : function() { 
      Headroom.options = {
         offset : 0, };
  },

  // OPTIONAL   
  // Triggered when the media query transitions 
  // from a *matched* to *unmatched*                        
  unmatch : function() {

Headroom.options = {
         offset : 137, };

  },    

  // OPTIONAL
  // Triggered once immediately upon registration of handler
  setup : function() {

  },      

  // OPTIONAL
  // Defaults to false
  // If true, defers execution of the setup function
  // until the first media query is matched (still just once)
  deferSetup : true           
});

jquery - Refresh a function on $(window).resize using headroom.js

I'm trying to initiate the script from headroom.js (http://wicky.nillia.ms/headroom.js/) to trigger when an element hits the top of the page. The position of the element will change if the window is resized.

My problem: the offset value of the function doesn't want to work with it on $(window).resize. The variable offset updates its value but the function doesn't use it after it has been defined once.

Here is my code: https://jsfiddle.net/kh4jv748/7/

jquery:

    //http://wicky.nillia.ms/headroom.js/ is already called 


    function updateViewportDimensions() {
        var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth,y=w.innerHeight||e.clientHeight||g.clientHeight;
        return { width:x,height:y };
    }
    // setting the viewport width
    var viewport = updateViewportDimensions();





    $(document).ready(function() {


    // initiate the headroom plugin to change nav bar behaviour


    function headroom (Offset){
        if( typeof Offset === "undefined" )  var Offset = 50; 
        var $offset = Offset;
        console.log('Vertical offset position from "trigger"', Offset);
        console.log('function headroom initiated');

        $(".top-menu").headroom({
          "offset": $offset,
          "tolerance": {
            "up" : "12", //tolerance scroll back 
            "down" : "0" // tolerance scroll 
            },
          "classes": {
            "initial": "animated",
            "pinned": "slideDown",
            "unpinned": "slideUp",
            "top" : "headroom--top",
            "notTop" : "headroom--not-top"
          }
        });
    };

    headroom();

    $(window).resize(function () {

        var home = $('body').hasClass('home');

        // if we're on the home page, we wait the set amount (in function above) then fire the function
        if( home ) { setTimeout( function() {

        // update the viewport, in case the window size has changed
        viewport = updateViewportDimensions();

          // if we're below 768 fire this off
          if( viewport.width < 768 ) {
            console.log('Home page < 768.');
            var Offset = 0;

          } else {
            // otherwise, let's do this instead
            console.log('Home page > 768');
            var Offset = $("#trigger").offset();
            var Offset = Offset.top
          }

          headroom(Offset);

        }, 2000, "headroom"); }

        else{ setTimeout( function() {
            console.log('Not on home page resized');

            viewport = updateViewportDimensions();

                if( viewport.width < 768 ) {
                console.log('Home page < 768.');
                var Offset = 0;
                console.log(Offset);

              } else {
                // otherwise, let's do this instead
                console.log('Home page > 768');
                var Offset = 500;
                console.log(Offset);
              }

              headroom(Offset);

            }, 2000, "headroom");

        };

    });


    });