滾動時導航欄背景變化

-1

我想從背景透明開始，然後讓background-color: rgba(255, 255, 255, 0.6);在瀏覽器開始向下滾動時轉換爲導航。滾動時導航欄背景變化

這就是我所擁有的html頁面所帶來的js代碼。

<head> 
<script src="nav.js" type="text/javascript"></script> 
</head>

這就是我的導航欄。我真的不希望整個navbar隨着scrolldown改變，只是inner。 logo圖片需要仍然是透明的。

<nav class="navbar" > 
    <img src="images/logo.png" class="logo"> 
    <div id="inner" id="top"> 

    <ul> 
     <li><a href="index.html" title="Home">HOME</a></li> 
     <li><a href="about.html" title="About">ABOUT</a></li> 
     <li><a href="contact.html" title="Contact">CONTACT</a></li> 
    </ul> 
    </div> 
</nav>

這是我的CSS（如果需要更多，我可以發佈）。

#inner{ 
width:140px; 
float:right; 
margin-right:5px; 
text-align:justify; 
} 
.navbar a { 
font-size: 14px; 
font-family:SinkinSansLight; 
letter-spacing:5px; 
line-height: 20px; 
border:none; 
padding: 2px ; 
text-decoration: none; 
margin-top: 10px; 
}

最後，我的JS，已經從單純其他主題複製粘貼SO，並與我的CSS的ID調整。

function checkScroll(){ 
var startY = $('#inner').height() * 2; //The point where the navbar changes in px 

if($(window).scrollTop() > startY){ 
    $('#inner').addClass("scrolled"); 
}else{ 
    $('#inner').removeClass("scrolled"); 
} 
} 

if($('#inner').length > 0){ 
$(window).on("scroll load resize", function(){ 
    checkScroll(); 
}); 
}

對不起有這麼多，我剛纔看到很多人需要比提供更多的代碼，而我一直在嘗試了幾個與JS的選擇。謝謝您的幫助！

來源

2016-12-04 Victoria

請張貼所有與您avbar還有滾動類太CSS。 –

你的'內部'元素有兩個id的？這不是有效的HTML，一個元素應該只有一個唯一的ID。 – Punit

我真的不明白你在這裏問什麼，你的代碼應該正常工作。用戶向下滾動時，應將「.scrolled」類添加到「＃inner」中。 – Punit

編輯：發現問題。你正在嘗試使用jQuery，但沒有將其包含在頁面中。把jQuery放在你的網站上。

我不確定你在問什麼，因爲你發佈的jQuery代碼工作正常......當用戶滾動時，它將類scrolled添加到#inner。

以下是您的代碼片段。我添加了到#inner的過渡和背景顏色到#inner.scrolled，並在身上設置了一個高度，以便您可以滾動並查看它的工作情況。

function checkScroll() { 
 
    var startY = $('#inner').height() * 2; //The point where the navbar changes in px 
 

 
    if ($(window).scrollTop() > startY) { 
 
    $('#inner').addClass("scrolled"); 
 
    } else { 
 
    $('#inner').removeClass("scrolled"); 
 
    } 
 
} 
 

 
if ($('#inner').length > 0) { 
 
    $(window).on("scroll load resize", function() { 
 
    checkScroll(); 
 
    }); 
 
}

body { 
 
    height: 1000px; 
 
} 
 
#inner { 
 
    width: 140px; 
 
    float: right; 
 
    margin-right: 5px; 
 
    text-align: justify; 
 
    position: fixed; 
 
    transition: background-color 1s; 
 
} 
 
#inner.scrolled { 
 
    background-color: rgba(255, 0, 0, 0.6); 
 
} 
 
.navbar a { 
 
    font-size: 14px; 
 
    font-family: SinkinSansLight; 
 
    letter-spacing: 5px; 
 
    line-height: 20px; 
 
    border: none; 
 
    padding: 2px; 
 
    text-decoration: none; 
 
    margin-top: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="navbar"> 
 
    <img src="images/logo.png" class="logo"> 
 
    <div id="inner"> 
 
    <ul> 
 
     <li><a href="index.html" title="Home">HOME</a> 
 
     </li> 
 
     <li><a href="about.html" title="About">ABOUT</a> 
 
     </li> 
 
     <li><a href="contact.html" title="Contact">CONTACT</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav>

來源

2016-12-04 19:45:51 Punit

我的CSS具有設置爲「高度：100％」的身體;「所以，如果仍然正常工作？我不確定發生了什麼事。我試圖實現這個網站是tresart.net。如果我的代碼是準確的，頁面是否可以正確地拉動.js文件？ – Victoria

滾動時導航欄背景變化

回答

相關問題