JQuery - Добавить/удалить класс в вертикальной прокрутке не имеет эффекта

Я пытаюсь добавить и удалить класс на основе вертикальной прокрутки (на навигационную панель), но, похоже, эффекта нет.JQuery - Добавить/удалить класс в вертикальной прокрутке не имеет эффекта

Я хочу, чтобы навигатор менял цвет фона на прокрутке, и я не могу понять, почему это не влияет.

Я попытался добавить только CSS, используя $ (элемент), кажется, .css, но то не будет иметь значение либо

Ссылка: https://jsfiddle.net/r4Lxvqps/

HTML:

<!DOCTYPE html> 
<title>A</title> 

    <body> 
     <div class="container"> 
      <header class="header"> 
       <nav class="nav"> 
        <ul> 
         <li> 
          <a href="#">Home</a> 
         </li> 
         <li> 
          <a href="#">About Me</a> 
         </li> 
         <li id="logo"> 
          <a href="#">Arshdeep</a> 
         </li> 
         <li> 
          <a href="#">Portfolio</a> 
         </li> 
         <li> 
          <a href="#">Contact</a> 
         </li> 
        </ul> 
       </nav> 
      </header> 

      <div class="home"> 
       <div class="container"> 
        <section> 

        </section> 
        <aside> 
         <img src="assets/images/imac.png" alt=""/> 
        </aside> 
       </div> 
      </div> 

      <div class="about"> 
       <div class="container"> 

       </div> 
      </div> 

      <div class="portfolio"> 
       <div class="container"> 

       </div> 
      </div> 

      <div class="contact"> 
       <div class="container"> 

       </div> 
      </div> 
     </div> 

    </body>

CSS:

* { 
       padding: 0px; 
       margin:0 auto; 
       -webkit-transition: all .2s ease-in-out; 
      } 

      html, body { 
       height: 100%; 
       font-family: 'TitilliumWeb-Regular', 'sans-serif'; 
      } 

      body { 
       min-height: 100% !important; 
      } 

      h1 { 
       padding: 0px; 
       margin:0px; 
      } 
      .container { 
       position:relative; 
       height: 100%; 
      } 

      nav { 
       padding: 5px 0px; 
       position:fixed; 
       width: 100%; 
       top:0; 
       z-index: 9999; 
       color:black; 
      } 

      nav > ul { 
       text-align: center; 
       padding: 5px 0px; 
      } 

      nav > ul > li { 
       display: inline-block; 
       vertical-align: middle; 
       margin:0 15px; 
      } 

      nav a { 
       text-decoration: none; 
       color:white; 
       display: block; 
      } 

      nav li a:not(#logo) { 
       padding: 10px 18px; 
      } 

      nav li:not(#logo) a { 
       opacity: .7; 
      } 

      nav li:not(#logo) a:hover { 
       opacity: 1; 
      } 

      #logo a { 
       font-size: 30px; 
      } 

      .scrolled { 
       background-color:white; 
       color:black !important; 
      } 

      /** Home Page **/ 
      .home { 
       vertical-align: top; 
       background-color: #38A5DB; 
       color:black; 
       min-height: 100%; 
       position:relative; 
      } 

      .home > .container { 
       top: 85px; 
       padding: 50px 0px; 
       float:left; 
       width: 100%; 
       color:white; 
      } 

      .about, .contact, .portfolio { 
       min-height: 100%; 
      } 

      section { 
       float:left; 
       width: 48%; 
       position:relative; 
       text-align: center; 
      } 

      aside { 
       float:right; 
       width: 50%; 
      } 

      aside > img { 
       width: 80%; 
      } 

      /** About Me **/

Проверки, если смещение> 50, а затем следует добавить CSS (цвет: черный) JQuery:

$(document).ready(function() { 
    $(window).scroll(function() { 
    var scroll_offset = $(window).scrollTop; 
    if (scroll_offset > 50) { 
     $(".nav").css("color", "black"); 
    } 
    }); 
});

источник

2016-02-28 RandomMath

Я рекомендовал бы класс тумблер вместо того, чтобы использовать функцию JQuery CSS(). Это было бы более гибким. – Aziz

Если чье-то решение решило вашу проблему, вы можете принять его как ответ, используя большой флажок. Для получения дополнительной информации: [как работает прием ответа?] (Http://stackoverflow.com/help/someone-answers) – Aziz

var scroll_offset = $(window).scrollTop();

$.fn.scrollTop является function. Вы забыли вызвать его.

источник

2016-02-28 10:27:15 Prashant

Также можно попробовать следующее:

$(window).scroll(function() { 
    if ($(window).scrollTop() >= 50) { 
$(".nav ul li a").css("color", "black"); 
    } else { 
    $(".nav ul li a").css("color", "white"); 
    } 
});

JSFiddle

источник

2016-02-28 10:32:52 Pedram

Вызов функции scrollTop (scrollTop())
Зафиксировать селектор: nav a вместо .nav
Добавить else заявление, чтобы восстановить первоначальный цвет

jsFiddle demo

$(document).ready(function() { 
 
    $(window).scroll(function() { 
 
    var scroll_offset = $(window).scrollTop(); 
 
    //alert(scroll_offset); 
 
    if (scroll_offset > 50) { 
 
     $("nav a").css("color", "black"); 
 
    } else { 
 
     $("nav a").css("color", "white"); 
 
    } 
 
    }); 
 
});

* { 
 
    padding: 0px; 
 
    margin: 0 auto; 
 
    -webkit-transition: all .2s ease-in-out; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    font-family: 'TitilliumWeb-Regular', 'sans-serif'; 
 
} 
 

 
body { 
 
    min-height: 100% !important; 
 
} 
 

 
h1 { 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    height: 100%; 
 
} 
 

 
nav { 
 
    padding: 5px 0px; 
 
    position: fixed; 
 
    width: 100%; 
 
    top: 0; 
 
    z-index: 9999; 
 
    color: black; 
 
} 
 

 
nav > ul { 
 
    text-align: center; 
 
    padding: 5px 0px; 
 
} 
 

 
nav > ul > li { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    margin: 0 15px; 
 
} 
 

 
nav a { 
 
    text-decoration: none; 
 
    color: white; 
 
    display: block; 
 
} 
 

 
nav li a:not(#logo) { 
 
    padding: 10px 18px; 
 
} 
 

 
nav li:not(#logo) a { 
 
    opacity: .7; 
 
} 
 

 
nav li:not(#logo) a:hover { 
 
    opacity: 1; 
 
} 
 

 
#logo a { 
 
    font-size: 30px; 
 
} 
 

 
.scrolled { 
 
    background-color: white; 
 
    color: black !important; 
 
} 
 

 

 
/** Home Page **/ 
 

 
.home { 
 
    vertical-align: top; 
 
    background-color: #38A5DB; 
 
    color: black; 
 
    min-height: 100%; 
 
    position: relative; 
 
} 
 

 
.home > .container { 
 
    top: 85px; 
 
    padding: 50px 0px; 
 
    float: left; 
 
    width: 100%; 
 
    color: white; 
 
} 
 

 
.about, 
 
.contact, 
 
.portfolio { 
 
    min-height: 100%; 
 
} 
 

 
section { 
 
    float: left; 
 
    width: 48%; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 

 
aside { 
 
    float: right; 
 
    width: 50%; 
 
} 
 

 
aside > img { 
 
    width: 80%; 
 
} 
 

 

 
/** About Me **/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <header class="header"> 
 
     <nav class="nav"> 
 
     <ul> 
 
      <li> 
 
      <a href="#">Home</a> 
 
      </li> 
 
      <li> 
 
      <a href="#">About Me</a> 
 
      </li> 
 
      <li id="logo"> 
 
      <a href="#">Arshdeep</a> 
 
      </li> 
 
      <li> 
 
      <a href="#">Portfolio</a> 
 
      </li> 
 
      <li> 
 
      <a href="#">Contact</a> 
 
      </li> 
 
     </ul> 
 
     </nav> 
 
    </header> 
 

 
    <div class="home"> 
 
     <div class="container"> 
 
     <section> 
 

 
     </section> 
 
     <aside> 
 
      <img src="assets/images/imac.png" alt="" /> 
 
     </aside> 
 
     </div> 
 
    </div> 
 

 
    <div class="about"> 
 
     <div class="container"> 
 

 
     </div> 
 
    </div> 
 

 
    <div class="portfolio"> 
 
     <div class="container"> 
 

 
     </div> 
 
    </div> 
 

 
    <div class="contact"> 
 
     <div class="container"> 
 

 
     </div> 
 
    </div> 
 
    </div>

источник

2016-02-28 10:34:40 Aziz

JQuery - Добавить/удалить класс в вертикальной прокрутке не имеет эффекта

ответ

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