Side banner that accompanies the scroll

Question

Side banner that accompanies the scroll

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

5

I wanted to add a side banner, which depending on the scroll, the banner accompanying the page. The image shows what I want to do:

Butthebannercanneverpassafewlimits,thatis,itcannotgooverheadernorfooterandkeepinginmindthatpagesizeisnotalwaysthesame.CanIlimitthiswithdivs?OrcanIgivealimit,forexample,giveaspaceaboveandbelow?AndhowdoIgetthebannertomoveaccordingtoscroll?

I'vedonethefollowing:

<style>@mediascreenand(max-width:770px){#getFixed{display:none;}}#getFixed{padding:100px0px00px;margin:0px;z-index:2;}</style><script>functionfixDiv(){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><divid="getFixed" style="margin-top: 35px;">
                    <img src="<?php echo $banner;?>" width="220">
                </div>

The problem is that the image goes up the footer, can I put some limit? What is happening to me is this (the banner is above the footer):

javascript html css

asked by anonymous 02.04.2014 / 10:36

3 answers

WPF - DataGrid - Deletion Android Performance Comparison: Canvas vs OpenGL ES

score 1 · Answer 1

A quick and easy way to do this would be to position a div manually and set the position attribute to 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>

score 1 · Answer 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>functionchecarScroll(){varmargem=10;varposicao=$(document).scrollTop()+window.innerHeight;varfootertop=$('#footer').offset().top;varmeiodapagina=window.innerHeight/2;varmaximo=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><divstyle="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>

score 0 · Answer 3

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>