image moves when scrool goes up or down

Navigation
0

I have an image inside a table. I want this image to move when it comes down or goes up with scoll. I already used the position fixed.

My jsfiddle example: link

    
asked by anonymous 01.02.2016 / 12:32

1 answer

1

You can do this using the position: fixed and specify a value for the alignment being, top, left, right, and bottom ...

Then add a js (jQuery so that the div accompanies the scroll).

Detail, you must specify the size of your div by which the image may be going over content, leaving an experience for the user.

Example: 

$('#divDaImg').scroll(function() {
  $('#FixedDiv').css('top', $(this).scrollTop());
});
.img {
  position: fixed;
  top: 10px;
  right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><div><p>LoremIpsumésimplesmenteumasimulaçãodetextodaindústriatipográficaedeimpressos,evemsendoutilizadodesdeoséculoXVI,quandoumimpressordesconhecidopegouumabandejadetiposeosembaralhouparafazerumlivrodemodelosdetipos.LoremIpsumsobreviveunãosóacincoséculos,comotambémaosaltoparaaeditoraçãoeletrônica,permanecendoessencialmenteinalterado.Sepopularizounadécadade60,quandoaLetrasetlançoudecalquescontendopassagensdeLoremIpsum,emaisrecentementequandopassouaserintegradoasoftwaresdeeditoraçãoeletrônicacomoAldusPageMaker.</p><p>LoremIpsumésimplesmenteumasimulaçãodetextodaindústriatipográficaedeimpressos,evemsendoutilizadodesdeoséculoXVI,quandoumimpressordesconhecidopegouumabandejadetiposeosembaralhouparafazerumlivrodemodelosdetipos.LoremIpsumsobreviveunãosóacincoséculos,comotambémaosaltoparaaeditoraçãoeletrônica,permanecendoessencialmenteinalterado.Sepopularizounadécadade60,quandoaLetrasetlançoudecalquescontendopassagensdeLoremIpsum,emaisrecentementequandopassouaserintegradoasoftwaresdeeditoraçãoeletrônicacomoAldusPageMaker.</p><p>LoremIpsumésimplesmenteumasimulaçãodetextodaindústriatipográficaedeimpressos,evemsendoutilizadodesdeoséculoXVI,quandoumimpressordesconhecidopegouumabandejadetiposeosembaralhouparafazerumlivrodemodelosdetipos.LoremIpsumsobreviveunãosóacincoséculos,comotambémaosaltoparaaeditoraçãoeletrônica,permanecendoessencialmenteinalterado.Sepopularizounadécadade60,quandoaLetrasetlançoudecalquescontendopassagensdeLoremIpsum,emaisrecentementequandopassouaserintegradoasoftwaresdeeditoraçãoeletrônicacomoAldusPageMaker.</p><p>LoremIpsumésimplesmenteumasimulaçãodetextodaindústriatipográficaedeimpressos,evemsendoutilizadodesdeoséculoXVI,quandoumimpressordesconhecidopegouumabandejadetiposeosembaralhouparafazerumlivrodemodelosdetipos.LoremIpsumsobreviveunãosóacincoséculos,comotambémaosaltoparaaeditoraçãoeletrônica,permanecendoessencialmenteinalterado.Sepopularizounadécadade60,quandoaLetrasetlançoudecalquescontendopassagensdeLoremIpsum,emaisrecentementequandopassouaserintegradoasoftwaresdeeditoraçãoeletrônicacomoAldusPageMaker.</p><p>LoremIpsumésimplesmenteumasimulaçãodetextodaindústriatipográficaedeimpressos,evemsendoutilizadodesdeoséculoXVI,quandoumimpressordesconhecidopegouumabandejadetiposeosembaralhouparafazerumlivrodemodelosdetipos.LoremIpsumsobreviveunãosóacincoséculos,comotambémaosaltoparaaeditoraçãoeletrônica,permanecendoessencialmenteinalterado.Sepopularizounadécadade60,quandoaLetrasetlançoudecalquescontendopassagensdeLoremIpsum,emaisrecentementequandopassouaserintegradoasoftwaresdeeditoraçãoeletrônicacomoAldusPageMaker.</p><p>LoremIpsumésimplesmenteumasimulaçãodetextodaindústriatipográficaedeimpressos,evemsendoutilizadodesdeoséculoXVI,quandoumimpressordesconhecidopegouumabandejadetiposeosembaralhouparafazerumlivrodemodelosdetipos.LoremIpsumsobreviveunãosóacincoséculos,comotambémaosaltoparaaeditoraçãoeletrônica,permanecendoessencialmenteinalterado.Sepopularizounadécadade60,quandoaLetrasetlançoudecalquescontendopassagensdeLoremIpsum,emaisrecentementequandopassouaserintegradoasoftwaresdeeditoraçãoeletrônicacomoAldusPageMaker.</p><p>LoremIpsumésimplesmenteumasimulaçãodetextodaindústriatipográficaedeimpressos,evemsendoutilizadodesdeoséculoXVI,quandoumimpressordesconhecidopegouumabandejadetiposeosembaralhouparafazerumlivrodemodelosdetipos.LoremIpsumsobreviveunãosóacincoséculos,comotambémaosaltoparaaeditoraçãoeletrônica,permanecendoessencialmenteinalterado.Sepopularizounadécadade60,quandoaLetrasetlançoudecalquescontendopassagensdeLoremIpsum,emaisrecentementequandopassouaserintegradoasoftwaresdeeditoraçãoeletrônicacomoAldusPageMaker.</p><p>LoremIpsumésimplesmenteumasimulaçãodetextodaindústriatipográficaedeimpressos,evemsendoutilizadodesdeoséculoXVI,quandoumimpressordesconhecidopegouumabandejadetiposeosembaralhouparafazerumlivrodemodelosdetipos.LoremIpsumsobreviveunãosóacincoséculos,comotambémaosaltoparaaeditoraçãoeletrônica,permanecendoessencialmenteinalterado.Sepopularizounadécadade60,quandoaLetrasetlançoudecalquescontendopassagensdeLoremIpsum,emaisrecentementequandopassouaserintegradoasoftwaresdeeditoraçãoeletrônicacomoAldusPageMaker.</p><p>LoremIpsumésimplesmenteumasimulaçãodetextodaindústriatipográficaedeimpressos,evemsendoutilizadodesdeoséculoXVI,quandoumimpressordesconhecidopegouumabandejadetiposeosembaralhouparafazerumlivrodemodelosdetipos.LoremIpsumsobreviveunãosóacincoséculos,comotambémaosaltoparaaeditoraçãoeletrônica,permanecendoessencialmenteinalterado.Sepopularizounadécadade60,quandoaLetrasetlançoudecalquescontendopassagensdeLoremIpsum,emaisrecentementequandopassouaserintegradoasoftwaresdeeditoraçãoeletrônicacomoAldusPageMaker.</p><p>LoremIpsumésimplesmenteumasimulaçãodetextodaindústriatipográficaedeimpressos,evemsendoutilizadodesdeoséculoXVI,quandoumimpressordesconhecidopegouumabandejadetiposeosembaralhouparafazerumlivrodemodelosdetipos.LoremIpsumsobreviveunãosóacincoséculos,comotambémaosaltoparaaeditoraçãoeletrônica,permanecendoessencialmenteinalterado.Sepopularizounadécadade60,quandoaLetrasetlançoudecalquescontendopassagensdeLoremIpsum,emaisrecentementequandopassouaserintegradoasoftwaresdeeditoraçãoeletrônicacomoAldusPageMaker.</p><p>LoremIpsumésimplesmenteumasimulaçãodetextodaindústriatipográficaedeimpressos,evemsendoutilizadodesdeoséculoXVI,quandoumimpressordesconhecidopegouumabandejadetiposeosembaralhouparafazerumlivrodemodelosdetipos.LoremIpsumsobreviveunãosóacincoséculos,comotambémaosaltoparaaeditoraçãoeletrônica,permanecendoessencialmenteinalterado.Sepopularizounadécadade60,quandoaLetrasetlançoudecalquescontendopassagensdeLoremIpsum,emaisrecentementequandopassouaserintegradoasoftwaresdeeditoraçãoeletrônicacomoAldusPageMaker.</p><p>LoremIpsumésimplesmenteumasimulaçãodetextodaindústriatipográficaedeimpressos,evemsendoutilizadodesdeoséculoXVI,quandoumimpressordesconhecidopegouumabandejadetiposeosembaralhouparafazerumlivrodemodelosdetipos.LoremIpsumsobreviveunãosóacincoséculos,comotambémaosaltoparaaeditoraçãoeletrônica,permanecendoessencialmenteinalterado.Sepopularizounadécadade60,quandoaLetrasetlançoudecalquescontendopassagensdeLoremIpsum,emaisrecentementequandopassouaserintegradoasoftwaresdeeditoraçãoeletrônicacomoAldusPageMaker.</p><p>LoremIpsumésimplesmenteumasimulaçãodetextodaindústriatipográficaedeimpressos,evemsendoutilizadodesdeoséculoXVI,quandoumimpressordesconhecidopegouumabandejadetiposeosembaralhouparafazerumlivrodemodelosdetipos.LoremIpsumsobreviveunãosóacincoséculos,comotambémaosaltoparaaeditoraçãoeletrônica,permanecendoessencialmenteinalterado.Sepopularizounadécadade60,quandoaLetrasetlançoudecalquescontendopassagensdeLoremIpsum,emaisrecentementequandopassouaserintegradoasoftwaresdeeditoraçãoeletrônicacomoAldusPageMaker.</p><p>LoremIpsumésimplesmenteumasimulaçãodetextodaindústriatipográficaedeimpressos,evemsendoutilizadodesdeoséculoXVI,quandoumimpressordesconhecidopegouumabandejadetiposeosembaralhouparafazerumlivrodemodelosdetipos.LoremIpsumsobreviveunãosóacincoséculos,comotambémaosaltoparaaeditoraçãoeletrônica,permanecendoessencialmenteinalterado.Sepopularizounadécadade60,quandoaLetrasetlançoudecalquescontendopassagensdeLoremIpsum,emaisrecentementequandopassouaserintegradoasoftwaresdeeditoraçãoeletrônicacomoAldusPageMaker.</p><p>LoremIpsumésimplesmenteumasimulaçãodetextodaindústriatipográficaedeimpressos,evemsendoutilizadodesdeoséculoXVI,quandoumimpressordesconhecidopegouumabandejadetiposeosembaralhouparafazerumlivrodemodelosdetipos.LoremIpsumsobreviveunãosóacincoséculos,comotambémaosaltoparaaeditoraçãoeletrônica,permanecendoessencialmenteinalterado.Sepopularizounadécadade60,quandoaLetrasetlançoudecalquescontendopassagensdeLoremIpsum,emaisrecentementequandopassouaserintegradoasoftwaresdeeditoraçãoeletrônicacomoAldusPageMaker.</p></div><divid="divDaImg">
  <img src='https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRdw26b_dwa8moS-gRSFpaG3dwJTB6Nqtqxexmb7PscuD5gVP-P' width=90 class="img" />
</div>
    
01.02.2016 / 12:43
Get name of the properties of a Json How to find out the current $ location