Question

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

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

我的小提琴：http://jsfiddle.net/a1oaxkon/

Answer 1

使用属性display：none而不是visibility：hidden将解决此问题。我不确定它是否会以任何方式影响你的CSS动画

Answer 2

好吧，如果你想动态地做，这里有一个解决方案：

$(".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

您可以将左边距调整为-1000像素，这可以解决您的问题。 http://jsfiddle.net/a1oaxkon/3/

{{1}}

如何提高可见性：隐藏链接无法点击

3 个答案: