× İletişim Formu Blog Mobil Sayfa Düzeyi Sticky Reklam Alanı Arlina Design 3/08/2018 Etiketler : HTML5 jQuery Widget Arlina Design <style> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); body {font-family: 'Fira Sans Condensed', sans-serif;} .sticky-ads { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: visible; position: fixed; text-align: center; bottom: -104px; left: 0; width: 100%; z-index: 999; max-height: 104px; background-image: none; background-color: #fff; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); margin-bottom: 0; padding-top: 4px; transition: all .4s ease-in-out; } .sticky-ad-close-btn { position: absolute; width: 28px; height: 28px; top: -28px; right: 0; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTMnIGhlaWdodD0nMTMnIHZpZXdCb3g9JzM0MSA4IDEzIDEzJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJz48Zz48cGF0aCBzdHlsZT0nZmlsbDojNEY0RjRGJyBkPSdNMzU0IDkuMzFMMzUyLjY5IDhsLTUuMTkgNS4xOUwzNDIuMzEgOCAzNDEgOS4zMWw1LjE5IDUuMTktNS4xOSA1LjE5IDEuMzEgMS4zMSA1LjE5LTUuMTkgNS4xOSA1LjE5IDEuMzEtMS4zMS01LjE5LTUuMTl6Jz48L3BhdGg+PC9nPjwvc3ZnPg=="); background-size: 13px 13px; background-position: 9px; background-color: #fff; background-repeat: no-repeat; box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.2); border: none; border-radius: 12px 0 0 0; cursor: pointer; } .sticky-ad-close-btn:before { position: absolute; content: ""; top: -20px; right: 0; left: -20px; bottom: 0; } * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } :active, :focus { outline: 0 } body { background:#efefef; height: 10000px; } .updatepageagain { position: fixed; width: 28px; height: 28px; top: 10px; right: 10px; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjQnIGhlaWdodD0nMjQnIHZpZXdCb3g9JzAgMCAyNCAyNCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB4bWxuczp4bGluaz0naHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayc+PGc+PHBhdGggc3R5bGU9J2ZpbGw6IzRGNEY0RicgZD0nTTE5LDEySDIyLjMyTDE3LjM3LDE2Ljk1TDEyLjQyLDEySDE2Ljk3QzE3LDEwLjQ2IDE2LjQyLDguOTMgMTUuMjQsNy43NUMxMi45LDUuNDEgOS4xLDUuNDEgNi43Niw3Ljc1QzQuNDIsMTAuMDkgNC40MiwxMy45IDYuNzYsMTYuMjRDOC42LDE4LjA4IDExLjM2LDE4LjQ3IDEzLjU4LDE3LjQxTDE1LjA1LDE4Ljg4QzEyLDIwLjY5IDgsMjAuMjkgNS4zNCwxNy42NUMyLjIyLDE0LjUzIDIuMjMsOS40NyA1LjM1LDYuMzVDOC41LDMuMjIgMTMuNTMsMy4yMSAxNi42Niw2LjM0QzE4LjIyLDcuOSAxOSw5Ljk1IDE5LDEyWic+PC9wYXRoPjwvZz48L3N2Zz4="); background-size: 24px 24px; background-position: center; background-color: transparent; background-repeat: no-repeat; border: none; border-radius:0; cursor: pointer; } </style> <meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/><div class="sticky-ads" id="sticky-ads"> <div style="width:320px;height:50px;background:#f0c36d;text-align:center;line-height:50px">Reklam alanı</div> <button class="sticky-ad-close-btn" onclick="document.getElementById('sticky-ads').style.display='none';" aria-label="Bu reklamı kapat"></button> </div> <button class="updatepageagain" onclick="location.reload();" aria-label="Sayfayı yeniden yükle"></button> <script> window.addEventListener("scroll", function() { var target = document.getElementById('sticky-ads'); if (window.pageYOffset > 300) { target.style.bottom = "0"; } }, false); </script> YENİ YAYIN ÖNCEKİ YAYIN "Blog Mobil Sayfa Düzeyi Sticky Reklam Alanı" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Blog Mobil Sayfa Düzeyi Sticky Reklam Alanı Arlina Design 3/08/2018 Etiketler : HTML5 jQuery Widget Arlina Design <style> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); body {font-family: 'Fira Sans Condensed', sans-serif;} .sticky-ads { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: visible; position: fixed; text-align: center; bottom: -104px; left: 0; width: 100%; z-index: 999; max-height: 104px; background-image: none; background-color: #fff; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); margin-bottom: 0; padding-top: 4px; transition: all .4s ease-in-out; } .sticky-ad-close-btn { position: absolute; width: 28px; height: 28px; top: -28px; right: 0; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTMnIGhlaWdodD0nMTMnIHZpZXdCb3g9JzM0MSA4IDEzIDEzJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJz48Zz48cGF0aCBzdHlsZT0nZmlsbDojNEY0RjRGJyBkPSdNMzU0IDkuMzFMMzUyLjY5IDhsLTUuMTkgNS4xOUwzNDIuMzEgOCAzNDEgOS4zMWw1LjE5IDUuMTktNS4xOSA1LjE5IDEuMzEgMS4zMSA1LjE5LTUuMTkgNS4xOSA1LjE5IDEuMzEtMS4zMS01LjE5LTUuMTl6Jz48L3BhdGg+PC9nPjwvc3ZnPg=="); background-size: 13px 13px; background-position: 9px; background-color: #fff; background-repeat: no-repeat; box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.2); border: none; border-radius: 12px 0 0 0; cursor: pointer; } .sticky-ad-close-btn:before { position: absolute; content: ""; top: -20px; right: 0; left: -20px; bottom: 0; } * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } :active, :focus { outline: 0 } body { background:#efefef; height: 10000px; } .updatepageagain { position: fixed; width: 28px; height: 28px; top: 10px; right: 10px; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjQnIGhlaWdodD0nMjQnIHZpZXdCb3g9JzAgMCAyNCAyNCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB4bWxuczp4bGluaz0naHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayc+PGc+PHBhdGggc3R5bGU9J2ZpbGw6IzRGNEY0RicgZD0nTTE5LDEySDIyLjMyTDE3LjM3LDE2Ljk1TDEyLjQyLDEySDE2Ljk3QzE3LDEwLjQ2IDE2LjQyLDguOTMgMTUuMjQsNy43NUMxMi45LDUuNDEgOS4xLDUuNDEgNi43Niw3Ljc1QzQuNDIsMTAuMDkgNC40MiwxMy45IDYuNzYsMTYuMjRDOC42LDE4LjA4IDExLjM2LDE4LjQ3IDEzLjU4LDE3LjQxTDE1LjA1LDE4Ljg4QzEyLDIwLjY5IDgsMjAuMjkgNS4zNCwxNy42NUMyLjIyLDE0LjUzIDIuMjMsOS40NyA1LjM1LDYuMzVDOC41LDMuMjIgMTMuNTMsMy4yMSAxNi42Niw2LjM0QzE4LjIyLDcuOSAxOSw5Ljk1IDE5LDEyWic+PC9wYXRoPjwvZz48L3N2Zz4="); background-size: 24px 24px; background-position: center; background-color: transparent; background-repeat: no-repeat; border: none; border-radius:0; cursor: pointer; } </style> <meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/><div class="sticky-ads" id="sticky-ads"> <div style="width:320px;height:50px;background:#f0c36d;text-align:center;line-height:50px">Reklam alanı</div> <button class="sticky-ad-close-btn" onclick="document.getElementById('sticky-ads').style.display='none';" aria-label="Bu reklamı kapat"></button> </div> <button class="updatepageagain" onclick="location.reload();" aria-label="Sayfayı yeniden yükle"></button> <script> window.addEventListener("scroll", function() { var target = document.getElementById('sticky-ads'); if (window.pageYOffset > 300) { target.style.bottom = "0"; } }, false); </script>
Yorum Gönder