javascript - 如何使可见性 :hidden link unclickable

Question

我的问题是，当用户在网站上滚动时，我正在让我的导航栏品牌的一部分消失，但它仍然留下一个大的可点击空框。通过 CSS/JS/HTML 实现此目的的最简单方法是什么？

这是它的一个 fiddle :http://jsfiddle.net/a1oaxkon/

-我的 Javascript(基本上只是在浏览器滚动时修改 CSS)

$(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"
    });

}
});

});

我的 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;
}

我的 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>

我的 fiddle :http://jsfiddle.net/a1oaxkon/

Answer 1

使用属性 display:none 代替 visibility:hidden 将解决这个问题。我不确定它是否会以任何方式影响您的 CSS 动画