0

$(window).scroll(function() {
 var features = $('.features').offset().top;
 if($(this).scrollTop() > features) {
   $('.features').css('background-color','red');
 }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top-menu">
  <div class="logo"><a href="#"><span>New</span>Providence</a></div>
    <div class="burger-menu">
      <div class="burger-menu-top"></div>
      <div class="burger-menu-middle"></div>
      <div class="burger-menu-middle"></div>
    </div>
    <div class="menu1 menu-hidden menu-visually-hidden">
      <span><a href="">Tour</a></span>
      <span><a href="#">Features</a></span>
      <span><a href="#">Pricing</a></span>
    </div>

    <div class="menu2 menu-hidden menu-visually-hidden">
      <span  class="help"><a href="#">Help</a></span>
      <span><a  href="#">Contacts</a></span>
      <span><button class=""><a href="#">Get  App</a></button></span>
    </div>
  </div>
     <div class="top-text">
      <h2>What happens tomorrow?</h2>
        <p>The sight of the tumblers restored Bob Sawyer to a degree of equanimity which he had not possessed since his interview with his landlady. His face brightened up, and he began to feel quite convivial.</p>
          <button class="flat-buttons watch-video">Watch video</button>
         </div>
        <div class="Iphone-6">
      </div>
    </div>
  </div>
  <div class="layout">
    <div class="features">
      <div class="feature">
        <div class="feature-icon1"></div>
        <h2>Real-time all the time</h2>
        <p>Thus much I thought proper to tell you in relation to yourself,
        Thus much I thought proper to tell you in relation to yourself, and to the trust I reposed in you.</p>
        <p>Just then her head struck against the roof of the hall: in fact she was now more than nine feet high, and she at once took up the little golden key and hurried off to the garden door.
        </p>
      </div>
      <div class="feature">
        <div class="feature-icon2"></div>
        <h2>Adopt without any obstacles</h2>
        <p>This sounded a very good reason, and Alice was quite pleased to</p>
      <p>Just then her head struck against the roof of the hall: in fact she was 
        now more than nine feet high, and she at once took up the little golden key and hurried off to the garden door.
      </p>
    </div>
  </div>
</div>

Сделал таким образом но есть некоторые ошибки. 1) Событие срабатывает на половине блока, а должен как только блок попадает в экран 2) При обновлении эфект не срабатывает пока не начнешь листать вниз или вверх Как можно реализовать данные функции???

1 ответ 1

1

$(document).ready(function() {
  var features = $('.features').offset().top;
  if (features == 450) {
    $('.features').css('background-color', '#red');
  } else {
    $('.features').css('background-color', 'transparent');
  }
});
$(window).scroll(function() {
  var features = $('.features').offset().top;
  if ($(this).scrollTop() > features - 450) {
    $('.features').css('background-color', 'red');
  } else {
    $('.features').css('background-color', 'transparent');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top-menu">
  <div class="logo"><a href="#"><span>New</span>Providence</a></div>
  <div class="burger-menu">
    <div class="burger-menu-top"></div>
    <div class="burger-menu-middle"></div>
    <div class="burger-menu-middle"></div>
  </div>
  <div class="menu1 menu-hidden menu-visually-hidden">
    <span><a href="">Tour</a></span>
    <span><a href="#">Features</a></span>
    <span><a href="#">Pricing</a></span>
  </div>

  <div class="menu2 menu-hidden menu-visually-hidden">
    <span class="help"><a href="#">Help</a></span>
    <span><a  href="#">Contacts</a></span>
    <span><button class=""><a href="#">Get  App</a></button></span>
  </div>
</div>


<div class="top-text">
  <h2>What happens tomorrow?</h2>
  <p>The sight of the tumblers restored Bob Sawyer to a degree of equanimity which he had not possessed since his interview with his landlady. His face brightened up, and he began to feel quite convivial.</p>
  <button class="flat-buttons watch-video">Watch video</button>

</div>
<div class="Iphone-6">
</div>
<div class="top-text">
  <h2>What happens tomorrow?</h2>
  <p>The sight of the tumblers restored Bob Sawyer to a degree of equanimity which he had not possessed since his interview with his landlady. His face brightened up, and he began to feel quite convivial.</p>
  <button class="flat-buttons watch-video">Watch video</button>

</div>
<div class="Iphone-6">
</div>
<div class="top-text">
  <h2>What happens tomorrow?</h2>
  <p>The sight of the tumblers restored Bob Sawyer to a degree of equanimity which he had not possessed since his interview with his landlady. His face brightened up, and he began to feel quite convivial.</p>
  <button class="flat-buttons watch-video">Watch video</button>

</div>
<div class="Iphone-6">
</div>
</div>
</div>
<div class="layout">
  <div class="features">
    <div class="feature">
      <div class="feature-icon1"></div>
      <h2>Real-time all the time</h2>
      <p>Thus much I thought proper to tell you in relation to yourself, Thus much I thought proper to tell you in relation to yourself, and to the trust I reposed in you.</p>
      <p>Just then her head struck against the roof of the hall: in fact she was now more than nine feet high, and she at once took up the little golden key and hurried off to the garden door.
      </p>
    </div>
    <div class="feature">
      <div class="feature-icon2"></div>
      <h2>Adopt without any obstacles</h2>
      <p>This sounded a very good reason, and Alice was quite pleased to</p>
      <p>Just then her head struck against the roof of the hall: in fact she was now more than nine feet high, and she at once took up the little golden key and hurried off to the garden door.
      </p>
    </div>
  </div>
  <div class="top-text">
    <h2>What happens tomorrow?</h2>
    <p>The sight of the tumblers restored Bob Sawyer to a degree of equanimity which he had not possessed since his interview with his landlady. His face brightened up, and he began to feel quite convivial.</p>
    <button class="flat-buttons watch-video">Watch video</button>
    <div class="top-text">
      <h2>What happens tomorrow?</h2>
      <p>The sight of the tumblers restored Bob Sawyer to a degree of equanimity which he had not possessed since his interview with his landlady. His face brightened up, and he began to feel quite convivial.</p>
      <button class="flat-buttons watch-video">Watch video</button>
      <div class="top-text">
        <h2>What happens tomorrow?</h2>
        <p>The sight of the tumblers restored Bob Sawyer to a degree of equanimity which he had not possessed since his interview with his landlady. His face brightened up, and he began to feel quite convivial.</p>
        <button class="flat-buttons watch-video">Watch video</button>

      </div>

3
  • $(this).scrollTop() > features - 450 // вместо 450 нужно подставить высоту блока 8 апр 2018 в 17:46
  • но остается проблема, при перезагрузке страницы ничего не выполняется если не сдвинуть скролл
    – bad code
    8 апр 2018 в 18:26
  • обновил код, должно работать 9 апр 2018 в 5:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.