I have a blog, I wanted to display an ad in a div after users scroll down and so soon the site is not visible that div appears, and if it goes up again it disappears. link link
I have a blog, I wanted to display an ad in a div after users scroll down and so soon the site is not visible that div appears, and if it goes up again it disappears. link link
Looks like a solution with jquery
$(function(){
var nav = $('.classDiv');
$(window).scroll(function () {
if ($(this).scrollTop() > 95) {
nav.show();
} else {
nav.hide();
}
});
});
This code will show the div when the top of the site goes up 95px, you can increase the value if you want it to appear lower, in this case, just change ".classDiv" to the div you are manipulating.
jQuery(document).ready(function($) {
$(function(){
var nav = $('.objeto');
$(window).scroll(function () {
if ($(this).scrollTop() > 95) {
nav.fadeIn();
} else {
nav.fadeOut();
}
});
});
});
.conteudo {
height: 700px;
}
.objeto {
position: fixed;
height: 50px;
width: 50px;
background-color: red;
display: none;
top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="conteudo">
<div class="objeto">
</div>
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Google Adsense</title>
<style type="text/css" media="screen">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scripttype="text/javascript">
jQuery(document).ready(function($) {
$(function(){
var nav = $('.objeto');
$(window).scroll(function () {
if ($(this).scrollTop() > 150) {
nav.fadeIn();
} else {
nav.fadeOut();
}
});
});
});
</script>
<script async="async" src="https://www.googletagservices.com/tag/js/gpt.js"></script><script>vargoogletag=googletag||{};googletag.cmd=googletag.cmd||[];</script><script>googletag.cmd.push(function(){varslot1=[];slot1[0]=googletag.defineSlot("/21643740994/BannerTopoDoArtigo", [728, 90], "div-gpt-ad-1507778867385-0"). addService(googletag.pubads());//);
googletag.pubads().enableSingleRequest();
googletag.pubads().setTargeting("Saude", ["Beleza", 'Dieta', 'Emagrecimento', 'Perder peso', 'produtos', 'Produtos de beleza', 'Receitas', 'Saude', 'Saúde', 'beleza emagrecimento']);
googletag.enableServices();
setInterval(function(){googletag.pubads().refresh([slot1]);}, 30000);
});
</script>
</head>
<body style="margin:0px;">
<!-- /21643740994/BannerTopoDoArtigo -->
<div id="div-gpt-ad-1507778867385-0" style="height:90px; width:100%; position: fixed; background-color: red; display: none !important; top: 0px;" class="objeto">
<script>
googletag.cmd.push(function() { googletag.display("div-gpt-ad-1507778867385-0"); });
</script>
</div>
<div style="height:2000px;whdth:100%;background-color:#999;margin-top:0px;"></div>
</body>
</html>
To start showing the banner, just act on 200
value of this line if($(document).scrollTop()>200){
var div = $('.banner');
$(window).scroll(function(){
if($(document).scrollTop()>200){
var percent = $(document).scrollTop() / ($(document).height() - $(window).height());
div.css('opacity', 0 + percent);
}else{
div.css('opacity', 0);
}
});
.encheLinguissa {
height: 1200px;
}
.banner {
position: fixed;
top: 0;
width: 100%;
height: auto;
background-color: #00e676;
opacity: 0;
z-index: 1;
transition: opacity 1.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass='encheLinguissa'></div><divclass="banner">
<div id='div' style="height:90px; width:720px; margin:0 auto;">
<img border="0" src="http://www.jalr.org/images/720x90.png">
</div>
</div>
transition - causes the transition to occur smoothly at a set time. The greater the value (1.5) in% with the smoother the transition.