How to hide a div when the position of another div is less than a certain value

Question

I'm trying to hide #back when #mobile-nav is positioned 0vw from the left. Here's what I have at the moment...

$(document).ready(function() { 
  var position = $("#mobile-nav").css("left", "0vw");
  if (position < 0vw) {
    $("#back").css("display", "none");
  } else {
    $("#back").css("display", "block");
  }
);

Any idea as to why this isn't returning successfully? Here's a link to the codepen https://codepen.io/spittman/pen/pBqYON

Answer 1

Try this:

var position = parseInt($("#mobile-nav").css("left"));

    if (position <= 0) {
        $("#back").css("display", "none");
    } 
    else {
        $("#back").css("display", "block");
    }

Answer 2

try this

$("ul ul").hide();


$("li").click(function(event) {
  $(this).children('ul').toggle();
  event.stopPropagation();
});

$("li").click(function() {
  $(this).siblings().children().hide();
});

$(".nav-child-trigger").click(function(){
  $("#mobile-nav").animate({left: '-=100vw'});
});

$("#back").click(function(){
  $("#mobile-nav").animate({left: '+=100vw'});
  var position = $("#mobile-nav").position().left;

    if (position > 0) {
        $("#back").css("display", "none");
    } 
    else {
        $("#back").css("display", "block");
    }
});


$(document).ready(function(){ 


});