如何使可見度：隱藏鏈接不可點擊

我的問題是，當用戶在網站上滾動時，我正在使我的導航欄品牌的一部分消失，但它仍留下一個大的可點擊空白框。什麼是最簡單的方法，要麼通過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

如何使可見度：隱藏鏈接不可點擊

回答

相關問題