diff --git a/assets/stylesheets/template/base/_accesskey.scss b/assets/stylesheets/template/base/_accesskey.scss index b8783da..ba30123 100644 --- a/assets/stylesheets/template/base/_accesskey.scss +++ b/assets/stylesheets/template/base/_accesskey.scss @@ -1,8 +1,9 @@ @charset "utf-8"; a[accesskey] { - position: absolute; + position: absolute!important; margin-left: 0; + z-index: 1000!important; color:#333; } diff --git a/modules/ad_banner/_ad_banner_widget0.html.erb b/modules/ad_banner/_ad_banner_widget0.html.erb index 5a2d7f1..70620a6 100644 --- a/modules/ad_banner/_ad_banner_widget0.html.erb +++ b/modules/ad_banner/_ad_banner_widget0.html.erb @@ -63,7 +63,62 @@ $('[data-subpart-id="{{subpart-id}}"] .prev-button').click(function(){ $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev"); }); - + $(function() { + function updateBannerClip() { + $('.ba-banner-widget-0').each(function() { + var $banner = $(this); + var vpWidth = $(window).width(); + var vpHeight = $(window).height(); + + // --- 寬度:找比 viewport 窄的父層容器 --- + var $container = null; + $banner.parents().each(function() { + var $el = $(this); + if ($el.outerWidth() < vpWidth - 10) { + $container = $el; + return false; + } + }); + + var clipLeft = 0; + var clipRight = 0; + if ($container && $container.length > 0) { + clipLeft = Math.max(0, $container.offset().left); + clipRight = Math.max(0, vpWidth - $container.offset().left - $container.outerWidth()); + } + + // --- 高度:依 .w-ad-banner 自己區塊的上下邊界裁切 --- + var bannerTop = $banner.offset().top - $(window).scrollTop(); + var bannerBottom = vpHeight - bannerTop - $banner.outerHeight(); + + var clipTop = Math.max(0, bannerTop); + var clipBottom = Math.max(0, bannerBottom); + + var clipValue = 'inset(' + + clipTop + 'px ' + + clipRight + 'px ' + + clipBottom + 'px ' + + clipLeft + 'px)'; + + $banner.find('img.w-ba-banner__image').css('clip-path', clipValue); + }); + } + + // 初始執行 + setTimeout(updateBannerClip, 300); + + // 視窗縮放時重新計算 + var resizeTimer; + $(window).on('resize', function() { + clearTimeout(resizeTimer); + resizeTimer = setTimeout(updateBannerClip, 100); + }); + + // ✅ 滾動時也要更新,因為 bannerTop 會隨捲動改變 + $(window).on('scroll', function() { + updateBannerClip(); + }); + });