changing margin-top of element while scrolling ,javascript

i want to attach an element to the bottom of a navbar the navbar is fixed so so it will be in the top when i scroll the problem is how to change the margin-top of that element so its top will be the bottom of the nav bar .. and its bottom is fixed .. (it will be hidden if i scoll a lot ) so the heigth of this element will be smaller when i scroll

here is what i did

 $(document).on('scroll', function (e) {
    $('.imagebleu').css('opacity', ($(document).scrollTop() / 500));
});

if you need more code i will post it here is the link for the page

  http://ift.tt/1LIWzqY

the part that contain that text is the nav bar and the other part is the .imagebleu element they have the same opacity , but because this element is under the navbar the navbar opacity doesn't look the same with it

So i want to add margin that changes by scrolling to fix this element on the bottom of the navbar

thank you very much