Как предотвратить отображение текста (в фоновом режиме) при прокрутке с помощью липкой кнопки? - PullRequest
Новая
       53

Как предотвратить отображение текста (в фоновом режиме) при прокрутке с помощью липкой кнопки?

0 голосов
/ 16 апреля 2020

Вот мой код Plunker: plnkr.co/edit/xvjY267THCcPa4mv?open=lib%2Fscript.js

Я могу заставить липкую кнопку правильно выравниваться с контейнером карты всякий раз, когда я прокручиваю вниз; однако при прокрутке текст, расположенный ниже на веб-странице, не скрывается. Свойство sticky проявляется, когда страница сильно увеличена (т. Е. На 300%). Есть ли способ сделать нижний текст скрытым (Текст 1, Текст 2) при прокрутке вниз?

Вот изображение моей проблемы: the webpage is zoomed too 300%

Для ясности, вот и мой код (к вашему сведению, его легче просмотреть в приведенной выше ссылке на Plunker): 

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 18,
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
    '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
  id: 'mapbox/streets-v11',
  tileSize: 512,
  zoomOffset: -1
}).addTo(mymap);
#white {
  width: 100vw;
  background: white;
}

.main-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 10px;
  margin-top: 40px;
  opacity: 1.0;
  background: white;
}

.main-header {
  height: 50px;
  background: white;
  opacity: 1.0;
}

.main-content {
  min-height: 250px;
  opacity: 1.0;
  background: white;
  overflow-y: auto;
}

.main-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  opacity: 1.0;
  background: white;
}

table {
  border-collapse: collapse;
}

th,
td {
  padding: 8px 16px;
}

th {
  background: white;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
</head>

<body>
  <main id="white" style="float:left" class="main-container">
    <header id="white" class="main-header">
      <div id="mapid" style="width: 1000px; height: 500px; border: 1px solid #ccc"></div>
      <br><button id="showAoiBtn" style="float:left" type="button">Save</button></header>
    <div id="white" class="main-content"></div>
    <footer id="white" class="main-footer"></footer>
  </main>

  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

  <table>
    <tbody>
      <tr>
        <td><label style="display: block; width: 80px;">Text 1</label></td>
      </tr>
      <tr>
        <td><label style="display: block; width: 80px;">Text 2</label></td>
      </tr>
    </tbody>
  </table>
</body>

</html>
...