在滚动时更改边距 - 元素顶部，javascript

Question

我想将一个元素附加到导航栏的底部 导航栏是固定的，所以当我滚动时它将在顶部 问题是如何更改该元素的margin-top，使其顶部将是导航栏的底部..并且其底部是固定的..（如果我scol很多，它将被隐藏）所以这个元素的高度当我滚动

时会更小

这就是我做的事情

 $(document).on('scroll', function (e) {
    $('.imagebleu').css('opacity', ($(document).scrollTop() / 500));
    $('.imagebleu').css('margin-top', ($('.navbar').heigh()+$(document).scrollTop()));
});

如果您需要更多代码，我会发布 这是页面的链接

  http://rechmed.byethost9.com/android_connect/

包含该文本的部分是导航栏 另一部分是.imagebleu元素 它们具有相同的不透明度，但因为此元素位于导航栏下方 导航栏不透明度与它看起来不一样

所以我想通过滚动来修改导航栏底部的这个元素来添加更改的边距

非常感谢

Answer 1

我做了一个基于图层的解决方案（带有z-index）

.imagebleu {
    background-color: #3498db;
    border-color: transparent;
    opacity: 0; 
  height: 100%;
  width:100%;
  margin-top:50px;
  position: fixed;
  right: 0;
  left: 0; 
  z-index:3;
}

margin-top：50px这是导航栏的高度，因此该元素将位于导航栏下方：0px之间

位置固定这使得元素覆盖了所有页面，所以我添加了z-index 在页面内容和paralax图像之间制作元素

类似的东西：

 navbar>content>this element>paralaximage  (the z-index) 

滚动时的元素会隐藏视差图像，内容会隐藏“元素”（.smagebleu），但没有人隐藏导航栏

我将更新网站，以便您可以看到差异

  rechmed.byethost9.com/android_connect