How can anyone help me limit this element as it is in the footer? It is overwriting the header when it appears and I can’t limit it!

Question

How can anyone help me limit this element as it is in the footer? It is overwriting the header when it appears and I can’t limit it!

Asked 4 years, 1 month ago

Viewed 64 times

-2

<!DOCTYPE html>
<html>
<head>
<style>
  #banner {
    position: fixed;        
    left: 10px;
    height: 300px;
    width: 110px;
    padding: 10px 5px;
    text-align: center;
    background-color: #fff;
    border: 5px solid #000;
  }
  #footer { height: 600px; background: #888; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
    function checarScroll() {
        var margem = 10;
        var posicao = $(document).scrollTop() + window.innerHeight;
        var footertop = $('#footer').offset().top;            
        var meiodapagina = window.innerHeight / 2;            
        var maximo = footertop + meiodapagina - margem;

        if (posicao < maximo) {
            $('#banner').css('bottom', meiodapagina + 'px');
        } else {                
            $('#banner').css('bottom', (margem + (posicao - footertop)) + 'px');
        }
    }
    $(document).ready(checarScroll);
    $(document).scroll(checarScroll);
</script>
</head>
<body>
<div style="height:1200px">
    Conteúdo da página                
</div>
<div id="banner">
    <div class="bannerconteudo">BANNER</div>        
</div>
<div id="footer">Aqui está o footer</div>
</body>
</html>

But only the header in your code? In your question you can’t see where or how you are using your header... I don’t think you need JS or jQuery for that, with CSS and position:Ticky you solve!

– hugocsl

2020/10/23 at 11:51

1 answer

Browser other questions tagged javascript html css

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

by Octávio Lage • 71 points · Answer 1 · 2020-10-23T15:13:58+00:00

Ana, welcome to Stack Overflow!

I tweaked your code a little bit and it was like this, put it to rotate here and give a little look to see if it answers:

<!DOCTYPE html>
    <html>
      <head>

        <style>
          #cabecalho {
            background-color: #b5e61d;
            font-weight: bold;
            padding: 7px;
            margin-bottom: 5%;
            text-align: center;
          }
          #banner {
            position: absolute;
            top: 5px;
            right: 10px;
            width: 110px; height: 300px;
            margin-top: 50px;
            background-color: red;
            border: 5px solid #000;
          }
          #footer { 
            padding: 10px; 
            background: #b5e61d; 
            font-weight: bold;
            text-align: center;
          }
        </style>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script>
      jQuery(document).ready(function() {
        $(window).scroll(function () {
          var scroll_top = $(document).scrollTop();
          var footer_top = $('#footer').offset().top;
          var banner_heigth = $('#banner').height();
          var set = scroll_top + "px";
          if ((scroll_top + banner_heigth) >= footer_top) { 
            set = (footer_top - banner_heigth*1.3) + "px";
          } 

          jQuery('#banner').animate({
              top:set
            },
            {
              duration:1000,
              queue:false
            });
        });
      });
    </script>

      </head>
      <body>

        <nav id="cabecalho"> HEADER </nav>
        <div style="height:1200px">
          Conteúdo da página                
        </div>
        <div id="banner">
          <div class="bannerconteudo">BANNER</div>        
        </div>
        <div id="footer"> FOOTER </div>

      </body>
    </html>

Your question had the negativity of some user for already have a similar topic here. To avoid negativity in your questions, try to dig deeper than you think, okay?

If you are interested in learning how to work and the rules of the house, visit this Stack Overflow Survival Guide in English.