Показать/скрыть меню на основе положения прокрутки

Question

Я добавил липкое меню (.component) в нижний колонтитул моего сайта. Появляется, если я прокручиваю вниз 200px с верхней части страницы и исчезает, если меньше 200px.

Это в основном идея. Однако, когда он исчезает при прокрутке вверх, он никогда не появляется снова, если я прокручу вниз.

$(window).scroll(function() { 
 

 
    if ($(this).scrollTop() > 200) { 
 
    //add effect/animation 
 
    $('.component').delay(100).animate({ 
 
     opacity: 1 
 
    }, 1000); 
 
    } else { 
 
    if ($(this).scrollTop() == 0) { 
 
     $('.component').hide(); 
 
    } 
 
    } 
 
});

body{ height:1000px; } 
 
.component { position:fixed; }

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="component"> 
 
    <!-- Start Nav Structure --> 
 
    <button class="cn-button" id="cn-button">+</button> 
 
    <div class="cn-wrapper" id="cn-wrapper"> 
 
    <ul> 
 
     <li><a href="#"><span class="fa fa-briefcase"></span></a> 
 
     </li> 
 
     <li><a href="#"><span class="fa fa-headphones"></span></a> 
 
     </li> 
 
     <li><a href="#"><span class="fa fa-home"></span></a> 
 
     </li> 
 
     <li><a href="#"><span class="fa fa-facetime-video"></span></a> 
 
     </li> 
 
     <li><a href="#"><span class="fa fa-envelope"></span></a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
</div>

Спасибо!

Answer 1

После того, как скрытый, он не будет повторно появляться, если вы установите непрозрачность 1. Вам необходимо позвонить шоу()

Answer 2

hide() изменяет display свойство вместо opacity, вы должны использовать animate() в обоих случаях.

$(window).scroll(function() { 
 

 
    if ($(this).scrollTop() > 200) { 
 
    //add effect/animation 
 
    $('.component').stop(true).animate({ 
 
     opacity: 1 
 
    }, 1000); 
 
    } else { 
 
    if ($(this).scrollTop() == 0) { 
 
     $('.component').stop(true).animate({ 
 
     opacity: 0 
 
     }, 1000); 
 
    } 
 
    } 
 
});

.component { 
 
    position: fixed; 
 
    opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="component"> 
 
    <!-- Start Nav Structure --> 
 
    <button class="cn-button" id="cn-button">+</button> 
 
    <div class="cn-wrapper" id="cn-wrapper"> 
 
    <ul> 
 
     <li><a href="#"><span class="fa fa-briefcase"></span></a> 
 
     </li> 
 
     <li><a href="#"><span class="fa fa-headphones"></span></a> 
 
     </li> 
 
     <li><a href="#"><span class="fa fa-home"></span></a> 
 
     </li> 
 
     <li><a href="#"><span class="fa fa-facetime-video"></span></a> 
 
     </li> 
 
     <li><a href="#"><span class="fa fa-envelope"></span></a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
</div> 
 
<div style="height: 800px;"></div>

Answer 3

Метод scrollTop() устанавливает или возвращает вертикальное положение полосы прокрутки для выбранных элементов.

Основываясь на вашем коде, если положение вертикальной полосы прокрутки меньше 200, тогда он скрывает элемент с помощью «компонента» класса.

После того, как скрытый на примере не будет видимого содержимого, а если нет содержимого, то $ (window) .scroll (function() {}); не будет executed.That поэтому элемент не отображается при прокрутке вверх после того, как элемент скрыт

$(window).scroll(function (event) { 
     var scroll = $(window).scrollTop(); 
     console.log(scroll); 
     if (scroll > 200) { 
      $('.component').delay(100).animate({ opacity: 1 }, 1000).show(); 
     } 
     else { 
      $('.component').hide(); 
     } 
    }); 

Ниже ссылка скрипку вы можете посмотреть в для этого: https://jsfiddle.net/ugg15sdL/19/