How to make a visibility:hidden link unclickable

Question

My problem is that I'm making a part of my navbar brand disappear when the user scrolls on the website, but it still leaves behind a big clickable empty box. What is the easiest way, either via CSS/JS/HTML to accomplish this?

Here's a fiddle of it: http://jsfiddle.net/a1oaxkon/

-My Javascript (which is basically just modifying the CSS when the browser is scrolled)

$(function(){
$(window).scroll(function() {
    if ($(window).scrollTop() > 0) {
    $(".navbar").css({
        "background-color":"#3B3F48", 
        "border-bottom": "1px solid #313131", 
        "box-shadow": "0px 1px 2px #242424",
        "padding-top": "15px",
        "height": "75px"
        });
    $(".lname").css({
        "margin-left" : "-100px",
        "visibility" : "hidden",
        "pointer-events" : "none",
        "opacity" : "0",
        "z-index" : "-100",
        "transition" : "all 0.4s, font-size 10s",
        "width" : "0px"
    });
    $(".fname").css({
        "background-color" : "#E46849",
        "z-index" : "100"
    });
}
else {
    $(".navbar").css({
        "background": "none",
        "border": "none",
        "box-shadow":"none",
        "padding-top":"25px",
        "height":"100px"
    });
    $(".lname").css({
        "visibility" : "visible",
        "margin-left" : "-15px",
        "opacity" : "1",
        "z-index" : "-100",
        "width" : "auto",
        "transition" : "all 0.4s, font-size 0s",
        "font-size" : "34pt"
    });
    $(".fname").css({
        "background" : "none",
        "z-index" : "100"
    });

}
});

});

My CSS:

.navbar {
    margin:0;
    padding:13px;
    padding-top:25px;
    padding-right:35px;
    height:100px;
    border:none;
    background:none;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.navbar-inverse .navbar-brand {
    color:white;
    font-size:34pt;
    transform:scale(1,1.25); 
    font-weight:700; 
    height:55px;
    padding:14px;
    padding-left:25px;
    width:auto;
    text-shadow: 1px 1px 1px #345667;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.lname {
    position:relative;
    color:black;
    width:auto;
    margin-left:-15px;
    z-index:1;
}
.fname {
    padding-bottom:8px;
    display: inline-block;
    height: 50px;
    width: 75px;
    border-radius: 7px;
    margin-top: -20px;
    padding-top: 15px;
    padding-left: 8px;
    margin-right:0;
    transition: all 0.3s;
    z-index:2;
}
.navbar-inverse .navbar-nav>li>a {
    color:white;    
}
body {
    background-color:#338BB7;
}

My HTML

<nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-header">
        <a class="navbar-brand" href="#top">
        <span class="fname">N1</span> <span class="lname">LastName</span>
        </a>
 </nav>

    <div id="top"></div>
    <div style="height:1000px"></div>

My fiddle: http://jsfiddle.net/a1oaxkon/

Answer 1

Using the property display:none instead of visibility:hidden will solve this problem. I'm not sure if it will effect your CSS animations in any way though

Answer 2

Well , if you want to do it dynamically, here one of the solution:

$(".lname").on('mouseover',function(){
  if($(this).is(':hidden')){
     $(this).css('cursor','none');
     $(this).off('click');
   }
  else{
       $(this).css('cursor','inherit(or your css cursor)');
       $(this).on('click',your_function_for_click);
   }
})

Answer 3

You can just adjust the left margin to -1000px and that should fix your issue with the box. http://jsfiddle.net/a1oaxkon/3/

    $(".lname").css({
        "margin-left" : "-1000px",