worked masthead

nested/header/index.js

@@ -24,8 +24,15 @@ class Header extends Component {
   }
   @autobind
   handleStateChange(status) {
+    // FIXME: global state e bağla. burada değiştirmek doğru değil.
     if (status.status === Sticky.STATUS_FIXED) {
       console.log("the component is sticky");
+      const adLeft = document.getElementById("anasayfa_sol");
+      adLeft.style.top = 80 + "px";
+    }
+    else {
+      const adLeft = document.getElementById("anasayfa_sol");
+      adLeft.style.top = 150 + "px";
     }
   }
   render() {

nested/indexlayout/index.js

@@ -5,10 +5,21 @@ import Container from "@comp/container/";
 import Row from "@comp/row/";
 import Lists from "@comp/lists/";
 import propTypes from "prop-types";
+import { AdSlot } from "react-dfp";
 
 const IndexLayout = props => {
   return (
     <Fragment>
+      <AdSlot
+        sizes={[[970, 250]]}
+        adUnit={"AnasayfaMastHead"}
+        slotId="anasayfaMastHead"
+      />
+      <AdSlot
+        sizes={[[160, 600], [120, 600]]}
+        adUnit={"anasayfa_sol1"}
+        slotId="anasayfa_sol"
+      />
       <Container width={970}>
         <Cards
           dataset={props.dataset.surmanset}

nested/pagelayout/index.js

@@ -8,8 +8,6 @@ import Icon from "@comp/icon/";
 import { faArrowAltCircleUp } from "@fortawesome/free-solid-svg-icons";
 import { URLProvider } from "@utils";
 import { Block } from "@comp/layouts";
-import { AdSlot } from "react-dfp";
-import "./assets/style.scss";
 
 const PageLayout = props => {
   return (
@@ -20,17 +18,6 @@ const PageLayout = props => {
         zIndex={9}
         activeClass="sticky-now"
       />
-      <AdSlot
-        adUnit={"haberiyakala_anasayfa_masthead"}
-        slotId="anasayfaMastHead"
-        sizes={[[970, 250]]}
-      />
-
-      <AdSlot
-        adUnit={"haberiyakala_anasayfa_sol1"}
-        slotId="anasayfa_sol"
-        sizes={[[160, 600],[120,600]]}
-      />
       <URLProvider>
         <Block
           type="section"

pages/index.js

@@ -3,8 +3,9 @@ import { getDataset, getContent } from "@utils";
 import PageLayout from "@nest/pagelayout";
 import propTypes from "prop-types";
 import IndexLayout from "@nest/indexlayout";
-import { DFPSlotsProvider } from "react-dfp";
+import { DFPSlotsProvider, AdSlot } from "react-dfp";
 import "static/styles/pages.scss";
+import "static/styles/indexAds.scss";
 
 const IndexPage = props => {
   return (

nested/pagelayout/assets/style.scss → static/styles/indexAds.scss

@@ -3,13 +3,15 @@
     left:0px;
     background-color:orange;
     top:150px;
-    z-index: 1;
+    z-index:1;
 }
 
 #anasayfaMastHead{
     margin-top:14px;
-    div{
+    z-index: 5;
+    div, iframe{
         margin:auto;
-        background-color:#fff;
+        background-color:transparent;
+        display:block;
     }
 }