Updated

assets/javascripts/app.js

@@ -11,6 +11,34 @@
       this.replaceWith(new_html);
     }
   });
+  function fix_first_element() {
+    console.log("fix_first_element");
+    if (!window.has_topest_banner) {
+      $('.downIcon').css('display','none');
+      var first_element = $('.header-banner');
+      if(first_element.length == 0){
+        first_element = $('.layout-content .layout-content-inner');
+      }else{
+        if(first_element.html() == ''){
+          first_element = $('.layout-content-box').eq(0);
+        }
+      }
+      if(first_element.length){
+        first_element.css("margin-top", "");
+        var ele_offset = first_element[0].getBoundingClientRect().top;
+        if(first_element.parents('.kenjohn.navFixed').length == 0)
+          ele_offset -= window.top_barrier_height;
+        if(ele_offset < 0){
+          first_element.css("margin-top", -ele_offset + "px");
+        }else{
+          first_element.css("margin-top", "");
+        }
+      }
+    }else{
+      $("#onesection").css("margin", "0");
+      $('.layout-content-inner .row, .layout-content-inner .row > [class*="col-"]').css("padding", "0");
+    }
+  }
   function initdata1 () {
     window.temp_scrollY = window.pageYOffset;
     window.temp_scrollX = window.pageXOffset;
@@ -18,20 +46,17 @@
         window.temp_scrollY = document.documentElement.scrollTop;
         window.temp_scrollX = document.documentElement.scrollLeft;
     }
-    if ($('.header-banner').html().trim() == "") {
-      $('.downIcon').css('display','none')
-    }
     // if (location.href.search('editmode') == -1 && document.getElementsByClassName('asideright').length != 0) {
     if ( $('.header-banner').length != 0) {
       $('.layout-header').css('height', '');
       var scrollTop = $(window).scrollTop();
-      if (scrollTop>5)  {          /* 要滑動到選單的距離 */
+      if (!window.has_topest_banner || scrollTop>5)  {          /* 要滑動到選單的距離 */
         if (parseInt($('.layout-content').css('margin-top'))==0 && $('.layout-content.topcontent').length != 0 && $('.layout-content.topcontent').offset().top<400){
           $('.layout-content').css('margin-top',$('.kenjohn').height()-$('#orbit-bar').height());
         }
         $('.kenjohn').addClass('navFixed').removeClass('navRel');   /* 幫選單加上固定效果 */
       } else {
-        if ($('.header-banner').html().trim() == "") {
+        if (!window.has_topest_banner) {
           $('.kenjohn').removeClass('navFixed').addClass('navRel');
         }else{
           $('.kenjohn').removeClass('navRel').removeClass('navFixed'); /* 移除選單固定效果 */
@@ -439,7 +464,10 @@
     }
 
     // 在所有的頁面(包含首頁)執行下面這幾個函數
+    window.has_topest_banner = ($('[data-pp="300"] .w-ad-banner').length != 0);
     initdata1();
+    fix_first_element();
+    window.setTimeout(fix_first_element, 3000);
     orbit.sitemenuDropdown();
     orbit.goBackTop('top', 800);
     orbit.plugins.bullEye();
@@ -474,6 +502,7 @@
           $('.navbar-toggle').bind(orbit.ClickMenuHandler());
         }
       },500 )} else {
+        fix_first_element();
         resizeTimer = setTimeout(function(){
           if( $('.mobile-menu .modules-menu').length > 0 ) {
             $('.navbar-header').after($('.modules-menu'));

assets/stylesheets/template/layout/content.scss

@@ -2,17 +2,17 @@
 
 @import "../initial";
 body{
-@media (min-width: 1150px){
+  @media (min-width: 1150px){
-.black-screen-social-window.reactable{
+    .black-screen-social-window.reactable{
-.content-social .social_wrap i, .content-social .social_wrap img {
+      .content-social .social_wrap i, .content-social .social_wrap img {
           width: 1.2em;
           font-size: 2em;
-}
+      }
-.content-social .social_wrap>div{
+      .content-social .social_wrap>div{
           width: 3.2em;
-}
+      }
-}
+    }
-}
+  }
 }
 .downIcon {
   position: absolute;
@@ -62,12 +62,8 @@ body{
   margin: -12px 0 0 -8px;
   border-left: 2px solid #fff;
   border-bottom: 2px solid #fff;
-    -webkit-transform: rotate(
+  -webkit-transform: rotate(-45deg);
--45deg
+  transform: rotate(-45deg);
-);
-    transform: rotate(
--45deg
-);
   box-sizing: border-box;
 }
 .downIcon a span::before{
@@ -142,10 +138,12 @@ body{
     @extend .response-pagecontainer;
   }
 }
+#onesection{
+  margin: 0 0.9375em;
+}
 .bannertwo{
-
-    @media(min-width:1024px){
   padding: 0;
+  @media(min-width:1024px){
     .w-ba-banner{
       display: flex;
       flex-direction: row-reverse;
@@ -359,9 +357,6 @@ body{
   @media(min-width:1024px){
     background-color: #72bcad;
   }
-    @media(max-width: $screen-sm){
-      padding: 0;
-    }
 }
 .onesection{
   color: #fff;

assets/stylesheets/template/template.scss

@@ -22,6 +22,9 @@
 
 //RWD
 @import "RWD";
+[data-pp="8"] [data-subpart-id]:last-child {
+  margin-bottom: 2em;
+}
 div.weather_widget1{
   background: unset;
 }

home/index.html.erb

@@ -24,7 +24,9 @@
           <section class="layout-content-box box " data-pp="4"></section>
           <section class="layout-content-box box " data-pp="1"></section>
         </div>
-
+        <div class="row">
+          <section class="layout-content-box col-sm-12" data-pp="9"></section>
+        </div>
         <div class="colorbox">
           <div class=" row">
            <section class="extra-box col-sm-12" data-pp="33"></section>
@@ -32,6 +34,8 @@
         </div>
         <div class="layout-content-box2 colorbox container row">
           <section class="body-banner line" data-pp="8"></section>
+          <section class="body-banner" data-pp="16"></section>
+          <section class="body-banner line" data-pp="17"></section>
           <div class="column row image-carousel">
           <div class="extra-box col-sm-12" data-pp="37"></div>
           <div class="extra-box col-sm-12" data-pp="38"></div>