JS：更改 ScrollTop 以显示浏览器宽度

Question

我的 WordPress 站点中有一个脚本 (https://deganiagroup.com/}，单击其中一个导航按钮可以滚动到屏幕上的适当位置。由于标题粘滞，我不得不添加一个固定的 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
} );

Answer 1

您可以直接在函数中计算高度：

<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>