Изменить CSS, когда раздел находится в veiwport

У меня есть одна страница сайт с фиксированным заголовком. Я хочу изменить цвет заголовка, когда я перейду в другой раздел. Вот HTML код заголовкаИзменить CSS, когда раздел находится в veiwport

<div class="pull-right"> 
        <nav class="navmenu center"> 
         <ul> 
          <li class="first active scroll_btn"><a href="#home" >Home</a></li> 
          <li class="scroll_btn"><a href="#about" >About Us</a></li> 
          <li class="scroll_btn"><a href="#services" >Services</a></li> 
          <li class="scroll_btn"><a href="#projects" >Projects</a></li> 
          <li class="scroll_btn"><a href="#team" >Team</a></li> 
          <li class="scroll_btn"><a href="#news" >News</a></li> 
          <li class="scroll_btn last"><a href="#contacts" >Contacts</a></li> 
         </ul> 
        </nav> 
       </div><!-- //MENU -->

И HTML для раздела

<section id="home"> 
Blah blah blah 
</section> 


<section id="about"> 
Blah blah blah 
</section>

Заголовок CSS

.menu_block { 
    position:fixed; 
    z-index:9999; 
    left:0; 
    top:0; 
    right:0; 
    height:80px; 
    width:100%; 
    background-color:#161616; 
    box-shadow:0 2px 3px rgba(0,0,0,0.1); 
} 

.navmenu ul li { 
    position:relative; 
    display:inline-block; 
} 
.navmenu ul li a { 
    display: block; 
    margin: 0 0 0 -3px; 
    padding: 30px 20px; 
    text-transform: uppercase; 
    font: 500 14px/20px open sans; 
    color: #fff; 
    background-color:transparent; 
    transition: all 0.3s ease-in-out; 
    -webkit-transition: all 0.3s ease-in-out; 
} 
.navmenu li:hover a, 
.navmenu li.active a { 
    color: #FFD902; 
}

Вот мой Javascript для прокрутки

function calculateScroll() { 
    var contentTop  = []; 
    var contentBottom = []; 
    var winTop  = $(window).scrollTop(); 
    var rangeTop = 200; 
    var rangeBottom = 500; 
    $('.navmenu').find('.scroll_btn a').each(function(){ 
     contentTop.push($($(this).attr('href')).offset().top); 
     contentBottom.push($($(this).attr('href')).offset().top + $($(this).attr('href')).height()); 
    }) 
    $.each(contentTop, function(i){ 
     if (winTop > contentTop[i] - rangeTop && winTop < contentBottom[i] - rangeBottom){ 
      $('.navmenu li.scroll_btn') 
      .removeClass('active') 
      .eq(i).addClass('active');   
     } 
    }) 
};

Когда я нажимаю о ссылке он скользит в о section.So как изменить цвет фона в .menu_block с помощью JQuery или JavaScript когда о разделе загружается в viewport.I также необходимо изменить его на другой цвет, когда я загружаю его в команду .

Простой вариант вопроса:

if(viewport = <section id="#about">) 
{ $(".menu_bar").css("background-color","#000");} 
else if(viewport = <section id="#services">) 
{ $(".menu_bar").css("background-color","#333");}

источник

2016-04-04 Ijaz

я не вижу ни капли Дж.С. в этом море HTML и CSS – madalinivascu

Возможный дубликат [Как сказать, если DOM элемент отображается в текущем видовом экране ?] (http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport) – madalinivascu

http://jsfiddle.net/ 4xSe4/5/ –

Если вы используете JQuery, то один из способов изменить .menu-блок цвет фона является, если-иначе заявления, как below.you поставить требуемый цвет-код ,

if($(".navmenu li.active a").text() == "Home") 
{ 
    $(".menu_block").css("background-color","color-code"); 
} 
else if($(".navmenu li.active a").text() == "About Us") 
{ 
    $(".menu_block").css("background-color","color-code"); 
}

Как и все

источник

2016-04-04 11:13:33

Это не работает. – Ijaz

<script> 
$(document).ready(function(){ 
    $(".scroll_btn").click(function(){ 
    $('.navmenu').css('background-color', "green"); 
    }); 
}); 
</script>

источник

2016-04-04 11:17:30

это не работает для моей проблемы. – Ijaz

, тогда попробуйте сделать с помощью метода jquery scrolltop() или использовать выше метод tarun bhatti. –

Мне нужны разные цвета для каждого раздела, а код выше - изменить атрибут css при щелчке где-нибудь. – Ijaz

Изменить CSS, когда раздел находится в veiwport

ответ

Смежные вопросы