Question

我有一个问题。如何使dropdown bootstrap上升或下降取决于我们正在寻找的部分。

这是我的css

#cover-inspiration{
    width: 100%;
  height: 100vh;
    background: url('http://placehold.it/350x150') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
  background-size: 100% 100%;
  position: relative;
}
.menu2{
    background: rgba(34,34,34,0.7);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 0;    
}

在我的代码中，我必须向下滚动一下才能看到dropdown中的内容。 dropdown只能在我的background ???请帮忙，谢谢你们

Answer 1

您可以使用，添加属性＆＃34; dropup＆＃34;到＆lt; div class =＆＃34; input-group-btn＆＃34;＆gt;更改弹出窗口的方向。

此dropup属性可以根据鼠标悬停事件进行动态更改：

＆＃13;

$.fn.visibleHeight = function() {
  var elBottom, elTop, scrollBot, scrollTop, visibleBottom, visibleTop;
  scrollTop = $(window).scrollTop();
  scrollBot = scrollTop + $(window).height();
  elTop = this.offset().top;
  elBottom = elTop + this.outerHeight();
  visibleTop = elTop < scrollTop ? scrollTop : elTop;
  visibleBottom = elBottom > scrollBot ? scrollBot : elBottom;
  return visibleBottom - visibleTop
}

$(function () {
  $('#cover-inspiration').hover(function(e) {
    if ($('#cover-inspiration').visibleHeight() > 200) {
      $('.input-group-btn').addClass('dropup');
    } else {
      $('.input-group-btn').removeClass('dropup');
    }
  }, function(e) {
    if ($('#cover-inspiration').visibleHeight() > 200) {
      $('.input-group-btn').addClass('dropup');
    } else {
      $('.input-group-btn').removeClass('dropup');
    }
  });
});

＆＃13;

#cover-inspiration{
  width: 100%;
  height: 100vh;
  background: url('http://placehold.it/350x150') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-size: 100% 100%;
  position: relative;
}
.menu2{
  background: rgba(34,34,34,0.7);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 0;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div id="cover-inspiration">
    <div class="menu2">
        <div class="col-lg-offset-3 col-lg-6 col-md-offset-3 col-md-6 col-sm-12 col-xs-12">
            <div class="wrapitup">
                <div class="input-group">
                    <span class="input-group-addon " id="basic-addon1" aria-hidden="true"><li class="glyphicon glyphicon-search"></li></span>
                    <input type="text" class="form-control" aria-label="...">
                    <div class="dropup input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div><!-- /btn-group -->
                    <div class="dropup input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <li><a href="#">2</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div><!-- /btn-group -->
                    <div class="input-group-btn">
                        <button id="go"  type="submit" class="btn btn-primary">Submit</button>
                    </div><!-- /btn-group -->
                </div><!-- /input-group -->
            </div>
        </div>
    </div>
</div>

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea expedita numquam at molestias, incidunt nam hic dolor nemo deserunt officia debitis voluptas laudantium itaque explicabo assumenda, inventore dolorem natus. Deleniti!</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea expedita numquam at molestias, incidunt nam hic dolor nemo deserunt officia debitis voluptas laudantium itaque explicabo assumenda, inventore dolorem natus. Deleniti!</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea expedita numquam at molestias, incidunt nam hic dolor nemo deserunt officia debitis voluptas laudantium itaque explicabo assumenda, inventore dolorem natus. Deleniti!</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea expedita numquam at molestias, incidunt nam hic dolor nemo deserunt officia debitis voluptas laudantium itaque explicabo assumenda, inventore dolorem natus. Deleniti!</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea expedita numquam at molestias, incidunt nam hic dolor nemo deserunt officia debitis voluptas laudantium itaque explicabo assumenda, inventore dolorem natus. Deleniti!</p>

    <img src="http://placehold.it/350x150">
    <img src="http://placehold.it/350x150">
    <img src="http://placehold.it/350x150">
    <img src="http://placehold.it/350x150">

    <img src="http://placehold.it/350x150">
</div>

＆＃13;

如何使下拉变化方向取决于部分

1 个答案: