Блог

В настоящее время я использую:

 <script>
$(window).scroll(
    {
        previousTop: 0
    }, 
    function () {
    var currentTop = $(window).scrollTop();
    if (currentTop < this.previousTop) {
        $("#menu").fadeIn();
    } else {
        $("#menu").fadeOut();
    }
    this.previousTop = currentTop;
});
</script>  

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

Единственное решение, которое я нашел, отключает включение / выключение при прокрутке, я пытаюсь найти решение, в котором они оба работают вместе. Например. всегда видно при прокрутке верхнего 200 пикселей, но с функциями включения / выключения при прокрутке вверх / вниз. Есть предложения? Спасибо!

Я отредактировал и опробовал код. Лучшее решение — удалить исчезновение:

 <script>
$(window).scroll(
    {
        previousTop: 0
    }, 
    function () {
    var currentTop = $(window).scrollTop();
    if ( currentTop == 0 ) {
         $("#menu").addClass('static-on-top');
    } else {
        $("#menu").removeClass('static-on-top');
        if (currentTop < this.previousTop ) {
            $("#menu").fadeIn();
        } else  {
           $("#menu").hide();
       }
    }
    this.previousTop = currentTop;
});
</script>
<style type="text/css">
.static-on-top {
      display: block !important;
}
#menu {
    position: fixed;
    height: 30px;
    background: red;
    width: 100%;
    top: 0;
    left: 0;
}
</style>
<div id="menu">
    Menu
</div>
  

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

 <script>
$(window).scroll(
    {
        previousTop: 0
    }, 
    function () {
    var currentTop = $(window).scrollTop();
    if ( currentTop == 0 ) {
         $("#menu").addClass('static-on-top');
    } else {
        $("#menu").removeClass('static-on-top');
        if (currentTop < this.previousTop) {
            $("#menu").fadeIn();
        } else {
           $("#menu").fadeOut();
       }
    }
    this.previousTop = currentTop;
});
</script>
<style type="text/css">
.static-on-top {
      display: block !important;
}
</style>