Skrollr - как сделать div display: none on scroll

Question

Привет Я пытаюсь установить «display: none» на одном из моих элементов, потому что когда он добирается до сути, он закрывает кнопку. Он должен показать затем отображение: none. Есть ли способ?

На данный момент у меня есть: -

  <header 
       data-start="opacity: 1; " 
       data-400p-start="opacity: 1; " 
       data-450p-start="opacity: 0; " 
       data-1699p-start="display: none;" 
      > 
       <div class="wrapper clearfix"> 

        <div class="intro"> 
         <h1><span>Innovative Studios Tailor Made</span> 
         <span>For Your Natural Habitat</span></h1> 
         <a href="contact.html" class="intro_btn">GET A FREE CONSULTATION</a> 
        </div> 

       </div> 
      </header> 

С помощью этого дисплея ни на не 1699p весь DIV отображается ни с самого начала.

Answer 1

Вы можете легко управлять «дисплеем», используя skrollr. Ваш код может выглядеть примерно так:

<header 
      data-start="opacity: 1; display:block;" 
      data-400p-start="opacity: 1; " 
      data-450p-start="opacity: 0; " 
      data-1699p-start="display: none;" 
     > 

Answer 2

skrollr предназначен для анимации изменений css, таких как непрозрачность. Однако, когда вы указываете «display: none», для начала этой анимации нет начальной точки. Если ваш элемент закрывает кнопку, использование skrollr для адресации не является идеальным. Вы можете использовать css, чтобы исправить это (например, с тегом z-index).