隐藏在标题

时间:2015-07-24 10:11:21

标签: wordpress woocommerce anchor-scroll

我的wordpress网站(http://www.libertadtravel.com)上有一个固定的标题,因此当使用锚链接时,锚点会隐藏在标题后面。不用担心 - 我用以下内容解决了这个问题:

:target:before {
    content: "";
    display: block;
    height: 156px;
    margin-top: -156px;
}

我的问题是这对结账时内置的woocommerce功能没有影响。尝试付款时出现错误,页面向上滚动以显示错误 - 除了它隐藏在标题后面。我没有运气就尝试了以下内容:

.woocommerce-error:before {
    content: "";
    display: block;
    height: 156px;
    margin-top: -156px;
    }

我猜woocommerce没有使用传统的锚点?任何想法我如何使这个功能,以便错误在标题下面可见?感谢。

3 个答案:

答案 0 :(得分:0)

固定。我找到了woocommerce用于在woocommerce / assets / js / frontend / checkout.min.js中滚动到页面顶部的JQuery函数。我将下面两个(两个)条目的偏移量更改为我的标题高度(加上10-15):

// Scroll to top
    $( 'html, body' ).animate({
    scrollTop: ( $( 'form.checkout' ).offset().top - 100 )
}, 1000 );

然后我将其复制到一个新的.js文件中,并通过我的functions.php将其排入以下内容:

// Use my own Woocommerce checkout js to correct scroll-to-top height
add_action('wp_enqueue_scripts', 'override_wc_checkout_script');
function override_wc_checkout_script() {
    wp_deregister_script('wc-checkout');
    wp_enqueue_script('wc-checkout', get_stylesheet_directory_uri() . '/woocommerce/js/checkout.js', array('jquery', 'woocommerce', 'wc-country-select', 'wc-address-i18n'), null, true);
}

答案 1 :(得分:0)

您实际上可以通过在自己排队的JS文件中执行此操作来覆盖WooCommerce全局函数:

// Common scroll to element code.
$.scroll_to_notices = function(scrollElement) {
  if(scrollElement.length) {
    $('html, body').animate({
      scrollTop: (scrollElement.offset().top - 200)
    }, 300);
  }
};

答案 2 :(得分:0)

在结帐时解决此问题的另一种方法是添加此 CSS 以偏移锚点的位置。将这两个值设置为所需的偏移量。只需将其添加到您的主 css 文件中即可。

.woocommerce-NoticeGroup-updateOrderReview, .woocommerce-NoticeGroup-checkout{
    margin-top: -200px;
    padding-top: 200px;
}