如何使可见度：隐藏链接不可点击

我的问题是，当用户在网站上滚动时，我正在使我的导航栏品牌的一部分消失，但它仍留下一个大的可点击空白框。什么是最简单的方法，要么通过CSS/JS/HTML来实现这一点？如何使可见度：隐藏链接不可点击

下面是它的一个小提琴：http://jsfiddle.net/a1oaxkon/

-My的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/

来源

2015-10-20 Jd Francis

才能添加属性'''disabled''' jQuery的' ''（something）.prop（“disabled”，“disabled”）'''？它会消失吗？ –

使用属性显示：无，而不是visibility：hidden的将解决这个问题。我不确定它是否会以任何方式影响您的CSS动画，但

来源

2015-10-20 23:16:12 Jess

此外，看看使用显示器：内联块在你隐藏的范围 – Jess

我喜欢这是多么简单和容易，但它确实搞乱了动画，因为CSS转换似乎不会影响显示 –

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

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

来源

2015-10-21 04:03:26 1Bladesforhire

不幸的是，这并没有帮助因为那样会使lname动画飞出屏幕 –

好吧，如果你要动态地做到这一点，这里的解决方案之一：

当它开始使用滚动

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

来源

2015-10-21 09:00:32 AlexBerd

如何使可见度：隐藏链接不可点击

回答

相关问题