Side banner that accompanies the scroll

Asked

Viewed 6,094 times

5

I wanted to add a side banner, depending on the scroll, the banner would accompany the page. The picture shows what I want to do: inserir a descrição da imagem aqui

But the banner can never cross some boundaries, IE, can not go over the header nor the footer and bearing in mind that the page size is not always the same. Can I limit this with Divs? Or can I give a limit, for example, to give a spacing up and down? And how do I get the banner to move depending on the scroll?

I’ve done the following:

                <style>
                    @media screen and (max-width: 770px) {
                        #getFixed {
                            display: none;
                        }
                    }

                    #getFixed { padding: 100px 0px 0 0px; margin: 0px; z-index: 2; }
                </style>
                <script>
                    function fixDiv() {
                      var $cache = $('#getFixed'); 
                      if ($(window).scrollTop() > 350) 
                        $cache.css({'position': 'fixed', 'top': '10px'}); 
                      else
                        $cache.css({'position': 'relative', 'top': 'auto'});
                    }
                    $(window).scroll(fixDiv);
                    fixDiv();
                </script>
                <div id="getFixed" style="margin-top: 35px;">
                    <img src="<?php echo $banner;?>" width="220">
                </div>

The problem is that the image goes over the footer, can I draw a line? What’s happening to me is this (the banner is over the footer): inserir a descrição da imagem aqui

javascript html css

  • @pc_pc if you create one more condition limiting the area it should not invade would not solve?

  • @Heltonss yes, but how? Can you help me?

  • Here’s a practical example that Danilo said https://www.devexpress.com/support/demos/ Banner live chat in the right corner.

  • @pc_oc banner can be below (hidden) header or footer?

  • @R3olon the idea wasn’t to get under the footer, because I’m already going around it with a z-index.

4 answers

1

<!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>

  • This example is very close to what I want! But it’s getting on top of the header. What can I do to make the banner appear after the header? At this point it appears above the header. thanks!

  • Theoretically it would be the same logic of footer with some adjustments. Did you ever test the code of this link? http://outstando.com/limited-fixed-area-using-jquery/

  • yes, I tried what is in this link but then I have conflicts with other js I have on the site. But in the code you put on top, works well! now I only have the problem with the header. Can you help me?

1

A quick and easy way to do this would be to manually position a div and set the attribute position with the value fixed:

<style type="text/css">
    #banner {
        position: fixed;
        width: 200px;
        display: inline-block;
        right: 30px;
        top: 150px;
        background: #C2DFFF;
        border: 1px solid #2898FF;
        padding: 8px;
    }
</style>

<div id="banner">
    <p>Conteúdo</p>
</div>

  • but in this case, the image goes up on the footer, since my footer is high, the image is on top of it.

  • Just adjust the top attribute so some value is ideal. What is the size (height) of your footer?

  • the footer has 500px

0

You can see here the example given by @Leandro

<script>
$(window).scroll(function(){
    if ( $(window).scrollTop() > sidebar_position.top 
      && $(window).scrollTop() < sidebar_scroll_bottom_limit.top - $(window).height())
    {
         $('#fixed-sidebar').stop().animate({top: $(window).scrollTop() - sidebar_top_padding}, 400);
    } else if ($(window).scrollTop() > sidebar_scroll_bottom_limit.top - $(window).height())  
    {
         $('#fixed-sidebar').stop().animate({top: sidebar_scroll_bottom_limit.top - $(window).height()}, 400);
    } else {
         $('#fixed-sidebar').stop().animate({top: '23' }, 400);         
    }

});
</script>

  • but just change my javascript code for this one? It’s just that it didn’t give

  • no, you have to adapt your variables.

-2

One way is to place the fixed position and set its size from the desired position.

Browser other questions tagged javascript html css

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