Комбинировать медиа-запрос ширины и JQuery прокрутку - PullRequest
Новая
       16

Комбинировать медиа-запрос ширины и JQuery прокрутку

2 голосов
/ 18 июня 2020

Я новичок в jQuery и успешно реализовал этот код, который заставляет мой заголовок закрепляться, когда пользователь прокручивает вниз 100 пикселей

Однако при использовании медиа-запросов я уменьшил высоту до 80 пикселей в max-width из 650 пикселей и, следовательно, для 650 пикселей и ниже мне нужно jQuery для срабатывания при прокрутке 80 пикселей, а не 100 пикселей.

Есть ли способ объединить медиа-запросы с jQuery?

Мой jQuery пока что это: 

 jQuery(window).scroll(function(){
        if (jQuery(window).scrollTop() >= 100) {
            jQuery('#masthead').addClass('fixed-header');
        }
        else {
            jQuery('#masthead').removeClass('fixed-header');
        }
    });

CSS

.fixed-header {
    position: fixed !important;
    top: 0;
    width: 100%; 
}

У меня была трещина, и я попробовал это: 

    if ($(window).width() >= 651) { 

        
                                    jQuery(window).scroll(function(){
                                        if (jQuery(window).scrollTop() >= 100) {
                                            jQuery('#masthead').addClass('fixed-header');
                                        }
                                        else {
                                            jQuery('#masthead').removeClass('fixed-header');
                                        }
                                    });
                                }


else {


                                jQuery(window).scroll(function(){
                                    if (jQuery(window).scrollTop() >= 80) {
                                        jQuery('#masthead').addClass('fixed-header');
                                    }
                                    else {
                                        jQuery('#masthead').removeClass('fixed-header');
                                    }
                                });
                             }   

}

И 

if ( pageWidth > 651 ) {
    
                        jQuery(window).scroll(function(){
                                if (jQuery(window).scrollTop() >= 100) {
                                    jQuery('#masthead').addClass('fixed-header');
                                }
                                else {
                                    jQuery('#masthead').removeClass('fixed-header');
                                }
                            });
                        
                        }

else {


                        jQuery(window).scroll(function(){
                            if (jQuery(window).scrollTop() >= 80) {
                                jQuery('#masthead').addClass('fixed-header');
                            }
                            else {
                                jQuery('#masthead').removeClass('fixed-header');
                            }
                        });

                    }
}

Но ни одна из них не работает.

** Отредактировано

Я сделал здесь JSFiddle https://jsfiddle.net/shereewalker/2r8Lcn7j/36/

Я намерен гарантировать, что второй заголовок прилипнет, когда достигнет вершины, которая в настоящее время работает так, как я хочу. Но когда я уменьшаю высоту верхнего заголовка с 650 пикселей и ниже до 80 пикселей, происходит скачок, поскольку липкая позиция второго заголовка по-прежнему применяется к scrollTop 100 пикселей.

Любая помощь будет очень принята

Ответы [ 2 ]

3 голосов
/ 22 июня 2020

Вы можете использовать position: sticky вместо jQuery: 

.content-body {
  height: 1000px;
  background-color: #dbdbdb;
}

p {
  margin: 0;
}

.header-top {
  width: 100%;
  height: 100px;
  background-color: #a0a0a0;
}

#masthead {
  width: 100%;
  height: 100px;
  background-color: #fbc957;
  position: sticky;
  top: 0;
}

.fixed-header {
  position: fixed !important;
  top: 0;
  width: 100%;
}

@media (max-width:650px) {
  .header-top,
  #masthead {
    height: 80px;
  }
}
<div class="content-body">
  <div class="header-top">
    <p>I have a logo in this banner</p>
  </div>

  <div class="menu-wrapper" id="masthead">
    <p>There is a secondary logo in this banner</p>
  </div>
</div>
2 голосов
/ 23 июня 2020

Вы можете легко решить эту проблему, измерив высоту шапки и действуя в соответствии с ней: 

function getMastheadHeight() {
    return jQuery('#masthead').height();
}

jQuery(window).scroll(function(){
    if (jQuery(window).scrollTop() >= getMastheadHeight()) {
        jQuery('#masthead').addClass('fixed-header');
    }
    else {
        jQuery('#masthead').removeClass('fixed-header');
    }
});


jQuery(window).scroll(function(){
    if (jQuery(window).scrollTop() >= getMastheadHeight()) {
        jQuery('#masthead:not(.menu-absolute)').addClass('sticky-mob-menu');
    }
    else {
        jQuery('#masthead:not(.menu-absolute)').removeClass('sticky-mob-menu');
    }
});

Fiddle: https://jsfiddle.net/moyztg0d/1/

Вкратце: ответ - да, вы можете комбинировать jQuery и CSS. Пожалуйста, попробуйте скрипку выше. Я изменил медиа-запрос для удобства тестирования, но вы можете вернуть его обратно без проблем. Вы также можете использовать CSS для этой конкретной проблемы, как указал Дэниел Найтс (поддержал этот ответ), но для случаев, когда нет решения CSS, стоит помнить, что вы также можете программно решить эти проблемы.

...