Как скрыть кнопку при прокрутке вверху страницы?

Question

Я пытаюсь адаптировать этот JSFiddle, чтобы кнопка меню на моем веб-сайте скрывалась, когда я нахожусь наверху страницы и показываю, когда начинаю прокрутку вниз.

Я изменил JS, чтобы соответствовать CSS на my site. Затем я разместил его в тегах в начале моей страницы

var $scb = $('<div class="toggle-menu-wrap"></div>'); 
$('.top-header').append($scb); 
var $ccol = $('.content'); 

$ccol.scroll(function(){ 
    $scb.stop(true,true).fadeTo(500, $ccol.scrollTop() > 10 ? 1 : 0); 
}); 

Однако все еще не работает. Я ошибаюсь в том, как я изменяю JS, чтобы соответствовать моим CSS?

Answer 1

1. С самого начала вы можете включить элемент меню переключения в меню HTML. Вставить его с помощью JS нет необходимости.

2. Написать одну строку CSS вам нужно, который, чтобы скрыть элемент от начала

   .toggle меню намотка { дисплей: нет; }

3. Ваша версия jQuery использует 'jQuery' вместо '$' для ссылки на себя. Я также хотел бы вновь написать свой JS как:

   jQuery(document).ready(function() { 
       fadeMenuWrap(); 
       jQuery(window).scroll(fadeMenuWrap); 
   }); 
   
   function fadeMenuWrap() { 
       var scrollPos = window.pageYOffset || document.documentElement.scrollTop; 
       if (scrollPos > 300) { 
        jQuery('.toggle-menu-wrap').fadeIn(300); 
       } else { 
        jQuery('.toggle-menu-wrap').fadeOut(300); 
       } 
   } 
   

Answer 2

Вы могли бы забыли связать Jquery.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 

Ссылка это внутри головы тега упаковывает .....

Answer 3

Как @ murli2308 сказала в комментариях выше, вы должны прикрепить прослушиватель события прокрутки окна:

$(document).ready(function() { 
    var $scb = $('<div class="scroll-border"></div>'); 
    $('.above').append($scb); 
    var $ccol = $('.content'); 

    $(window).scroll(function(){ 
     $scb.stop(true,true).fadeTo(500, $ccol.scrollTop() > 10 ? 1 : 0); 
    }); 
}) 

Обманирование кода в $(document).ready() также было бы хорошей идеей.

Причины $ccol.scroll(function() { ... работает в этой скрипке из-за CSS:

.content{ 
    height: 200px; 
    width: 200px; 
    overflow: auto; 
} 

Примечание overflow: auto;. Это приводит к прокручиванию определенного div. Однако на вашем сайте вы просматриваете всю страницу, а не $ccol. Это означает, что обработчик события никогда не будет запускать событие прокрутки (поскольку $ccol никогда не будет прокручиваться).

Answer 4

Это должен сделать работу:

$(window).scroll(function(e){ 
    if ($(this).scrollTop() > 0) { 
     $(".your_element").css("display", "block"); 
    } else { 
     $(".your_element").css("display", "none"); 
    } 
});