up

assets/javascripts/app.js

@@ -4158,7 +4158,18 @@ $(function() {
     });
   }, 500);
 });
-
+$(function () {
+  setTimeout(function () {
+    var $banner = $('[data-pp="1999"]');
+    if ($banner.length && $banner.find('.w-ad-banner').length === 0) {
+      $('.dropdowns').css({
+        'position': 'relative',
+        'padding-bottom': '0',
+        'background': '#256b86'
+      });
+    }
+  }, 500);
+});
 //ai須新增的function
 
 

assets/stylesheets/template/modules/ad_banner.scss

@@ -14,27 +14,43 @@
       margin-top: 8em;
   }
 }
-.ba-banner-widget-youtube{
+.ba-banner-widget-youtube {
   overflow: hidden;
-  iframe{
+  height: auto !important;
-    @media(min-width:1025px){
+  .w-ad-banner__caption_text{
-      position: absolute;
+    display: none!important;
-      top: -180px;
-      left: 0;
-      width: 100%;
-      height: calc(100% + 215px);
-    }
-  }
-  .jarallax-video-audio{
-    @media(min-width:769px){
-          top: 7em;
-    }
-  }
-  .w-ba-banner__wrap{
-    height: auto !important; 
   }
   .banner-overlay{
-    @media(max-width:768px){
+    visibility: visible!important;
+  }
+  iframe {
+    @media(min-width: 1025px) {
+      position: absolute;
+      top: -15vw;
+      left: 0;
+      width: 100%;
+      height: calc(100% + 11vw);
+    }
+  }
+
+  .w-ba-banner__wrap {
+    overflow: hidden;
+    position: relative;
+
+    // ✅ 固定顯示區域高度，超出的底部黑條就被裁切
+    @media(min-width: 1025px) {
+      height: 40vw !important; 
+    }
+  }
+
+  .jarallax-video-audio {
+    @media(min-width: 769px) {
+      top: 7em;
+    }
+  }
+
+  .banner-overlay {
+    @media(max-width: 768px) {
       position: relative;
     }
   }
@@ -290,10 +306,16 @@ ul.button-mid{
 }
 // Widget 0
 .ba-banner-widget-0 {
-  height: 70vh !important;
+  @media(max-width:768px){
+    height: 30vh !important;
+    .w-ba-banner__wrap{
+    height: 30vh !important;
+    }
+  }
+  height: 50vh;
   z-index: 0;
   .w-ba-banner__wrap{
-    height: 70vh !important;
+    height: 50vh;
   }
   .youtube, .cycle-youtube {
     width: 100%;
@@ -323,7 +345,7 @@ ul.button-mid{
     // text-shadow: 1px 1px 1px #0000008c;
   }
     img{
-      position: fixed;
+      // position: fixed;
       top:0;
       left: 0;
       @media(max-width: 1500px){

modules/ad_banner/_ad_banner_widget0.html.erb

@@ -63,62 +63,73 @@
   $('[data-subpart-id="{{subpart-id}}"] .prev-button').click(function(){
     $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
   });
-  $(function() {
+$(function() {
-    function updateBannerClip() {
+  function updateBannerParallax() {
-      $('.ba-banner-widget-0').each(function() {
+    $('.ba-banner-widget-0').each(function() {
-        var $banner = $(this);
+      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;
+      if ($banner.closest('.homebanner').is(':hidden')) return;
-        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 $wrap      = $banner.find('.w-ba-banner__wrap');
-        var bannerTop    = $banner.offset().top - $(window).scrollTop();
+      var $img       = $banner.find('img.w-ba-banner__image');
-        var bannerBottom = vpHeight - bannerTop - $banner.outerHeight();
+      var vpWidth    = $(window).width();
+      var scrollTop  = $(window).scrollTop();
+      var wrapHeight = $wrap.outerHeight();
 
-        var clipTop    = Math.max(0, bannerTop);
+      var bannerOffsetTop = $banner.offset().top;
-        var clipBottom = Math.max(0, bannerBottom);
+      var parallaxOffset  = Math.max(0, (scrollTop - bannerOffsetTop) * 0.4);
 
-        var clipValue = 'inset('
+      $img.css({
-          + clipTop    + 'px '
+        'position'  : 'absolute',
-          + clipRight  + 'px '
+        'top'       : parallaxOffset + 'px',
-          + clipBottom + 'px '
+        'left'      : '0',
-          + clipLeft   + 'px)';
+        'width'     : '100%',
-
+        'height'    : (wrapHeight * 1.3) + 'px',
-        $banner.find('img.w-ba-banner__image').css('clip-path', clipValue);
+        'object-fit': 'cover'
       });
-    }
 
-    // 初始執行
+      var bannerLeft  = $banner.offset().left;
-    setTimeout(updateBannerClip, 300);
+      var bannerWidth = $banner.outerWidth();
+      var clipLeft    = Math.max(0, bannerLeft);
+      var clipRight   = Math.max(0, vpWidth - bannerLeft - bannerWidth);
 
-    // 視窗縮放時重新計算
+      if (clipRight < vpWidth * 0.8) {
-    var resizeTimer;
+        $img.css('clip-path', 'inset(0px ' + clipRight + 'px 0px ' + clipLeft + 'px)');
-    $(window).on('resize', function() {
+      } else {
-      clearTimeout(resizeTimer);
+        $img.css('clip-path', 'none');
-      resizeTimer = setTimeout(updateBannerClip, 100);
+      }
     });
+  }
 
-    // ✅ 滾動時也要更新，因為 bannerTop 會隨捲動改變
+  $('.ba-banner-widget-0 .w-ba-banner__wrap').css('overflow', 'hidden');
-    $(window).on('scroll', function() {
+
-      updateBannerClip();
+  setTimeout(updateBannerParallax, 300);
-    });
+
+  var resizeTimer;
+  $(window).on('resize', function() {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(updateBannerParallax, 100);
   });
+
+  $(window).on('scroll', function() {
+    updateBannerParallax();
+  });
+
+  var navFixedObserver = new MutationObserver(function() {
+    if (!$('.outdropdowns').hasClass('navFixed')) {
+      setTimeout(updateBannerParallax, 100);
+    }
+  });
+
+  if ($('.outdropdowns').length) {
+    navFixedObserver.observe($('.outdropdowns')[0], {
+      attributes: true,
+      attributeFilter: ['class']
+    });
+  }
+});
+
 </script>
 <style type="text/css">
   .w-ba-banner .controlplay .pause-slide.active i{
@@ -136,4 +147,11 @@
   .next-button,.prev-button{
     cursor: pointer;
   }
+ .ba-banner-widget-0.w-ad-banner__image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    object-fit: cover;
+  }
 </style>