以编程方式相对于页面顶部设置模态位置

Question

我有一个模式，我用作菜单下拉菜单。 为了使这项工作，我手动设置模式弹出的高度在菜单正下方。 为此，我添加了确定的像素数，并附加了css属性＆＃34; top＆＃34;具有固定像素数的模态。 我遇到的问题是它是从用户在页面上的顶部设置该数字，而不是页面的顶部。 这是一个AngularJS模式，但我使用jquery来设置css属性，如果有一个带有jquery的css解决方案，它应该是一个适用的解决方案。

以下是我从顶部设置像素数的方法：

                var el = angular.element(element);
            var thumbnail = el["0"];
            var finalThumbnailContainer = thumbnail.parentElement;
            var inte = 0;
            while(inte != 3){
                finalThumbnailContainer = finalThumbnailContainer.parentElement;
                inte++;
            }
            var innerEl = angular.element(finalThumbnailContainer);
            var top = ModalServices.getHorizontalMenuHeight();
            //110
            innerEl.css('top', top);

我对layout / css不是特别好，也不知道如何使用该模式从页面开头出现X像素，而不是用户当前在页面上的位置

我非常感谢这里的一些帮助。

谢谢，

这是模态html的图像：

第一张图片是当滚动条位于页面顶部时出现的模态图像，第二张图像是当滚动条稍微向下翻页时出现的模态图像。

Answer 1

当滚动条位于顶部时，我通过从顶部的静态距离减去$（window）.scrollTop（）找到了解决方案。

  var el = angular.element(element);
            var thumbnail = el["0"];
            var finalThumbnailContainer = thumbnail.parentElement;
            var inte = 0;
            while(inte != 3){
                finalThumbnailContainer = finalThumbnailContainer.parentElement;
                inte++;
            }
            var innerEl = angular.element(finalThumbnailContainer);
            var top = ModalServices.getHorizontalMenuHeight();
            var scrollTop = $(window).scrollTop();
             top = top - scrollTop;
            innerEl.css('top', top);

现在，无论滚动条设置在哪里，模态都会下降到菜单正下方的正确位置....看哪！