Create a div at the top of the blog (wordpress) to float fixed while scrolling down

Asked

Viewed 128 times

0

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. website link http://maroclub.net/

html css html5 wordpress css3

3 answers

0


Look has 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 trim lower, in case, just change ". classDiv" by 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>
<div class="conteudo">
  <div class="objeto">
</div>

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>
<script type="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>
  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];
</script>

<script>

	googletag.cmd.push(function() {

    var slot1 = [];
    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>

0

To start showing the banner just act on the value 200 of that 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>

<div class='encheLinguissa'>

</div>

<div class="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 certain time. The higher the value (1.5) in transition: opacity 1.5s; smoother the transition.

Browser other questions tagged html css html5 wordpress css3

You are not signed in. Login or sign up in order to post.