Question

MY CODE

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

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

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

我希望下拉菜单在大于屏幕时滚动。由于标题是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;
})

Answer 2

另一种方法是将您的下拉菜单移到固定元素之外：

工作DEMO

js点击

$('#dropDownBtn').click(function(){
    var $t = $(this), $d = $('.dropdown-menu');
    $d.css({top: $t.offset().top+$t.height()+10, left: $t.offset().left-($d.outerWidth(true)-$d.outerWidth(true))});
    $d.slideToggle();
  })

你必须弄清楚如何处理滚动条与像素跳转出现/消失..一种方法可能是离开body {overflow-y：scroll}，所以滚动条总是出现。

固定位置div被隐藏为较小的屏幕

2 个答案:

js点击