logo标签列表

使DIV固定，不会滚动

javascriptjqueryhtml
3
我有一个地图和一个地图下面的列表。当我滚动时，我希望地图保持固定，但是地图下面的列表可以滚动。

enter image description here

我的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>
4个回答
0

我认为通过将CSS添加到地图中，答案可能非常简单：

position: fixed;
z-index: 10;

内容区块（我猜测是“replace”？）可能包含：

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

更容易调试并提供准确的内容，上面的链接没有地图。你能放一个jsfiddle吗？
0

在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。这将使你拥有的所有三个元素都适应整个视口的高度。还要注意，集合上的边距被去掉了；这些会增加高度，并使高度略微超过100vh，因为页面的大小几乎与屏幕大小相当。你可能还想调整一下.orange的高度，以保持一致性。
如果你想要固定高度的元素和响应式高度的元素，你需要在CSS中使用calc()属性（https://developer.mozilla.org/en-US/docs/Web/CSS/calc）。但是，如果选择这种方法，要准备好在不同浏览器上可能出现问题。如果你想要一个简单、跨浏览器的解决方案，只使用vh可能更好。希望能对你有所帮助！
如果这将用于智能手机，而我没有确切的高度适合每个手机怎么办？ - Mike
@Mike 地图和导航栏的高度是固定的吗？ - hopkins-matt
如果你在说橙色条，是的，橙色条和地图都有固定的高度。我正在使用 materializecss，顶部栏已经固定了。 - Mike
请为不同的视口设置高度，以便在各种设备上获得最佳显示效果。 - Elliot Berman
这是一个示例，人们想在Chrome中玩：http://beerportfolio.glass/test/location.html - Mike
显示剩余3条评论
0

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

<div id="map" style="height: 300px; position:fixed; top: 0; left: 0; z-index: 100"></div>
刚试了一下，地图仍然随着下半部分移动。 - Mike
你可能需要设置位置（就像我在调整后的答案中所做的那样）。如果仍然无法正常工作，您是否愿意设置一个JSFiddle以便更轻松地进行故障排除？ - Colin
0

嗯……

#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 ;)
  }
我无法为我想要滚动的部分固定高度。不知道移动屏幕的大小。 - Mike
那刚才让地图消失了。 - Mike
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接