JS: измените ScrollTop для отображения ширины браузера

У меня есть скрипт на моем сайте WordPress (https://deganiagroup.com/%7D, где щелкнув один из Кнопка навигации обеспечивает прокрутку для перехода в нужное место на экране. Из-за липкого заголовка мне пришлось добавить фиксированное значение scrollTop, которое либо работает прямо на рабочем столе, но не на мобильном устройстве, либо наоборот.

Это связано с тем, что высота заголовка изменяется в зависимости от ширины браузера, потому что изменяется сам заголовок. Так что фиксированная высота здесь не работает.

Могу ли я расширить этот скрипт, чтобы предложить точки останова, чтобы значение scrollTop изменялось в зависимости от высоты заголовка, независимо от ширины браузера?

Этот скрипт предназначался для разработчиков страниц Elementor, но на самом деле он мог быть для чего угодно, связанного с прокруткой по щелчку.

Javascript:

add_action( 'wp_footer', function() {
    if ( ! defined( 'ELEMENTOR_VERSION' ) ) {
        return;
    }
    ?>
    <script>
        jQuery( function( $ ) {
            // Add space for Elementor Menu Anchor link
            $( window ).on( 'elementor/frontend/init', function() {
                elementorFrontend.hooks.addFilter( 'frontend/handlers/menu_anchor    /scroll_top_distance', function( scrollTop ) {
                    return scrollTop - 121; // Scroll to fixed value
                } );
            } );
        } );
    </script>
    <?php
} );

javascript elementor
person Adam Bell    schedule 10.12.2020    source источник
comment
Если высота вашего заголовка переменная, вы можете использовать переменные CSS, которые ссылаются на него. :root { --header-height: 40px; } @media (min-width: 800px) { :root { --header-height: 50px; } } и тому подобное. И затем, когда вы захотите использовать его в своем CSS, вы можете просто var(--header-height) использовать значение   -  person Taplar    schedule 11.12.2020

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете вычислить высоту непосредственно в функции:

<script>
  jQuery(function($) {
    var $siteHeader  = $('#site-header');
    
    // Add space for Elementor Menu Anchor link
    $(window).on('elementor/frontend/init', function() {
      elementorFrontend.hooks.addFilter('frontend/handlers/menu_anchor    /scroll_top_distance', function(scrollTop) {
        return scrollTop - $siteHeader.height();
      });
    });
  });
</script>
person blex    schedule 10.12.2020
comment
Я только что обновил functions.php вашим кодом, но не вижу никаких изменений. Вы можете проверить? Например, расстояние c должно быть около 157 пикселей на компьютере и 121 на мобильном телефоне. - person Adam Bell; 11.12.2020
comment
Мне потребовалось время, чтобы посмотреть на него и установить точки останова в коде, чтобы увидеть, что происходит. Эта return scroll... линия никогда не вызывается. Фильтр никогда не вызывается. И вот почему: в коде Elementor это должно происходить, когда вы нажимаете на заданный набор ссылок. Он пытается найти эти ссылки с помощью селектора CSS, который ищет в settings.selectors.links, но этот селектор не установлен, поэтому он отказывается: imgur.com/a/BnVvUYp (handleAnchorLinks не называется bc no selector) Я попытался просмотреть документацию, но не нашел, как установить этот параметр. Значение, вероятно, должно быть ".menu-link" - person blex; 11.12.2020