[英]Menu active class on scrolling - How to add font color and font size change on active class?
我已經在滾動菜單上添加了活動狀態。
HTML:
<li><a href="#subsection-schedule"><span class="blueNavTitle">CONTENT</span></a>
<ul>
<li><a id="nav_section2" href="#A" class="active">A</a></li>
<li><a id="nav_section3" href="#B">Upload</a></li>
<li><a id="nav_section4" href="#C">Add</a></li>
<li><a id="nav_section5" href="#D">Add MORE</a></li>
<li><a id="nav_section6" href="#E">Prepare</a></li>
<li><a id="nav_section7" href="#F">Present</a></li>
<li><a id="nav_section8" href="#G">Upload MORE/a></li>
<li><a id="nav_section9" href="#K">Increase</a></li>
</ul>
</li>
JavaScript:
<script type="text/javascript">
$(function(){
var menusections = {},
_height = $(window).height(),
i = 0;
// Grab positions of our sections
$('.menusection').each(function(){
menusections[this.name] = $(this).offset().top;
});
$(document).scroll(function(){
var $this = $(this),
pos = $this.scrollTop();
// Look in the sections object and see if any section is viewable on the screen.
// If two are viewable, the lower one will be the active one.
for(i in menusections){
if(menusections[i] > pos && menusections[i] < pos + _height){
$('a').removeClass('active');
$('#nav_' + i).addClass('active');
}
}
});
});
</script>
有效的CSS是:
.active {
background-color: rgba(0, 0, 0, 0.1);
}
我的問題是,除了背景顏色更改外,如果我還要更改字體大小和字體顏色怎么辦? 我嘗試添加字體大小和其他一些字體,但無法正常工作。
只需添加到您的CSS類:
.active {
background-color: rgba(0, 0, 0, 0.1);
font-size:14pt !important; /*whatever size you want*/
color:blue !important; /*(font color)*/
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.