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
Create a div at the top of the blog (wordpress) to float steadily while scrolling down
0
asked by anonymous 12.10.2017 / 18:33
3 answers
0
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>
12.10.2017 / 18:50
0
<!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>
12.10.2017 / 19:45
0
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.
13.10.2017 / 00:27