jquery - 固定位置 div 在较小的屏幕上被隐藏

Question

MY CODE

我已经使用 bootstrap 创建了我的 html 的基本结构。

我的问题是当下拉高度大于屏幕时下拉列表的底部被隐藏，因为使用 position: fixed 设置了标题。

如果高度大于屏幕，我还有最后一个选项可以向下拉列表添加滚动。

我希望下拉菜单在大于屏幕时滚动。由于 header 是 position: fixed 我无法向下滚动下拉菜单。

有没有办法解决这个问题？谢谢。

Answer 1

你可以尝试做 this

我所做的是在窗口滚动时计算屏幕高度和下拉高度之间的差异。

并使用该差异向下移动下拉菜单。

这是它的代码。

jQuery

var lastScrollTop = 0;
$(window).scroll(function () {
  var pageHeight = $(window).height() - $('.navbar').height();
  if ($(window).height() < $('.dropdown-menu').height() &&  $('.dropdown-menu').height() > pageHeight && $('#dropDownBtn').hasClass('activeBtn')){
    var scrollMove = $('.dropdown-menu').height() - pageHeight;
    $('.dropdown-menu ').css('marginTop',-scrollMove);
  }
  var st = $(this).scrollTop();
        if (st < lastScrollTop){
            $('.dropdown-menu').css('marginTop','0');
        }
        lastScrollTop = st;
})