Question

我在地图下有地图和列表。当我滚动时，我希望地图保持固定，但地图下的列表要滚动。

我的HTML是：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" />
    <title>Starter Template - Materialize</title>

    <!-- CSS  -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
    <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
    <link href="css/leaflet.css" type="text/css" rel="stylesheet" media="screen,projection" />

</head>

<body>
    <div class="navbar-fixed ">

        <nav class="orange " role="navigation">
            <div id="replaceBar" class="nav-wrapper container">
                <a id="logo-container" href="#" class="brand-logo">Local Market</a>
                <ul class="right hide-on-med-and-down left">
                    <li><a href="stats.html">Statistics</a></li>
                </ul>

                <ul id="nav-mobile" class="side-nav left">
                    <!-- Statistics Drop Down Start  -->
                    <li class="no-padding">
                        <ul class="collapsible collapsible-accordion">
                            <li>
                                <a class="collapsible-header"> My Statistics<i class="mdi-navigation-arrow-drop-down right"></i></a>
                                <div class="collapsible-body">
                                    <ul>
                                        <li><a href="stats.html">Basic Stats</a></li>
                                        <li><a href="myBreweries.html"> My Top Breweries</a></li>
                                        <li><a href="myStyles.html">My Top Styles</a></li>
                                        <li><a href="myTaste.html">My Top Tastes</a></li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <!-- Statistics Drop Down End  -->
                    <li><a href="list.html">My Lists</a></li>
                    <!-- Map Drop Down Start  -->
                    <li class="no-padding">
                        <ul class="collapsible collapsible-accordion">
                            <li>
                                <a class="collapsible-header">My Maps<i class="mdi-navigation-arrow-drop-down right"></i></a>
                                <div class="collapsible-body">
                                    <ul>
                                        <li><a href="mapTapped.html">Breweries Tapped</a></li>
                                        <li><a href="mapVisited.html">Breweries Visited</a></li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <!-- Map Drop Down End  -->
                    <!-- Discover Drop Down Start  -->
                    <li class="no-padding">
                        <ul class="collapsible collapsible-accordion">
                            <li>
                                <a class="collapsible-header">Discover<i class="mdi-navigation-arrow-drop-down right"></i></a>
                                <div class="collapsible-body">
                                    <ul>
                                        <li><a href="topBeers.html">Top Beers</a></li>
                                        <li><a href="topBreweries.html">Top Breweries</a></li>
                                        <li><a href="topStyles.html">Top Styles</a></li>
                                        <li><a href="topTaste.html">Top Tastes</a></li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <!-- Discover Drop Down End  -->
                    <!-- Drink Local Drop Down Start  -->
                    <li class="no-padding">
                        <ul class="collapsible collapsible-accordion">
                            <li>
                                <a class="collapsible-header">Breweries Tapped<i class="mdi-navigation-arrow-drop-down right"></i></a>
                                <div class="collapsible-body">
                                    <ul>
                                        <li><a href="localBeers.html">Top Local Beers</a></li>
                                        <li><a href="nearbyBreweries.html">Nearby Breweries</a></li>

                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <!-- Drink Local Drop Down End  -->
                </ul>

                <a href="#" data-activates="nav-mobile" class="button-collapse"><img style="vertical-align: middle;" src="img/menuIcon.png" height="30" width="30"></a>

                <ul id="search" class="right valign-wrapper">
                    <li class="valign">
                        <a href="#"> <img style="vertical-align: middle;" src="img/searchIcon.png" height="30" width="30"></a>
                    </li>

                </ul>
            </div>
        </nav>


    </div>


    <div id="map" style="height: 300px;" style="position:fixed;"></div>


    <div id="replace"> </div>





    <!-- Modal Structure -->
    <div id="modal1" class="modal">
        <div class="modal-content center">
            <div>
                <span class="card-title">Searching Stock</span>
            </div>
            <div id="load" class="preloader-wrapper big active ">
                <div class="spinner-layer spinner-yellow-only">
                    <div class="circle-clipper left">
                        <div class="circle"></div>
                    </div>
                    <div class="gap-patch">
                        <div class="circle"></div>
                    </div>
                    <div class="circle-clipper right">
                        <div class="circle"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>






</body>

</html>

Answer 1

在Chrome中播放了您的实际示例之后，这是对我有用的更具体的答案：

.navbar-fixed{
   height: 10vh;     
}
#map{
   height: 50vh;
}
#collection{
   height: 40vh;
   overflow-y: scroll;
   margin-top: 0;
   margin-bottom: 0;
}

如果你将它添加到CSS中，你应该看到你正在寻找的东西（如果我听到你的话）。由于百分比是由高度超出视口大小的力定义的，因此您需要使用单位vh。 100vh =视口的高度。

在我的示例CSS中，我使用vh加起来为100.这将使您调整的所有3个元素都调整到完整的视口高度。还要注意收集边缘的下降;这些将增加到高度，使高度略高于100vh，你会得到一些漂亮的草图滚动，因为页面刚刚超过屏幕的大小。为了保持一致，你也可能想要使用.orange高度。

如果你想要固定高度元素和响应高度元素，你将不得不转向CSS（https://developer.mozilla.org/en-US/docs/Web/CSS/calc）中的calc（）属性。但是，如果你走这条路，那就准备好在浏览器中进行一些不稳定的覆盖。如果你想要一个简单的跨浏览器解决方案，你可能最好只去vh路线。希望这有帮助！

Answer 2

这样的东西似乎可以工作（你将固定地图的z-index设置为高于其他内容的值）：

SDL2.dll

Answer 3

渴求

#topDivthatNeedstoStay { 
      width:100%;
      top:0;
      left:0;
      height: $height; // variable replace with actual
      position: fixed; // boom
      background: $yellow; // variable replace with actual
  }
#elementYouwantoScroll { 
     width:100%;
     height:$height; // variable replace with actual
     overflow-y:scroll; // scroll
     -webkit-overflow-scrolling: touch; // for mobile might as well pop this in as well ;)
  }

Answer 4

我认为通过将css添加到地图中可以非常简单：

position: fixed;
z-index: 10;

内容div（我猜到的“替换”？）可能有：

position: relative;
margin-top: 300px;
z-index: 3;

更容易调试并提供正确的实际内容，上面的实时素材链接没有地图。你能忍受一个jsfiddle吗？

使DIV固定，因此它不会滚动

4 个答案: