A div superimposed on an image descends according to the scroll bar

Question

I have a div that shows some details about an image when it is displayed, but I’m developing for mobile and when you slide down the Ivs that contain these details also move out of the images.

Follow the project link on github.

LINK : https://github.com/bleekbless/ProjetoPi2.0/tree/master/projetopi/www

Answer 1

To place a div q accompany the bar, you must set it with position: Fixed; so the top point: x or bottom: x of css, will be fixed, even when scroll down.

Answer 2

My friend, I took a look at your code. At first I saw that they had some " id " equal, I advise you to use a class (also changing the css):

File touchTouch.jquery.js

$('<div class="dadosRoupa">').html(text);

Another thing I noticed was that I came down because of this code here:

var $spanInPlace = target.find("div"),
            $targetImage = target.find('img'),
            distanceBot  = target.height() - $targetImage.offset().top - $targetImage.height();

        $spanInPlace.css({"bottom": distanceBot+"px"});

I would change to:

   $spanInPlace.css({"bottom": "0px"});

So always take the same position.

I hope I’ve helped.