Jump to content

Why does position sticky not work?


Recommended Posts

Hi guys,

 

If you click on "AC-brytare" there will be som content on the right.

I want this content (.tabcontent) to automatically scroll down using position: sticky;

 

How come it does not work?

 

Best, Anders

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style type="text/css">* {box-sizing: border-box}

body {font-family: "Lato", sans-serif;}
/* Style the tab */
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 40%;
height: 100%;
}
/* Style the buttons inside the tab */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 5px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 80%;
}



/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 60%;
border-left: none;
height: 100%;
overflow: hidden;
position: sticky;
top: 0;
}
</style>

<h2>Solcellslexikon</h2>


<div class="tab"><button class="tablinks" id="defaultOpen" onclick="openCity(event, 'AC-brytare')">AC-brytare</button>
<button class="tablinks" onclick="openCity(event, 'Ampere')">Ampere (A)</button>
<button class="tablinks" onclick="openCity(event, 'Anlaggningsid')">Anl&auml;ggnings-ID</button>
<button class="tablinks" onclick="openCity(event, 'anslutningspunkt')">Anslutningspunkt</button>
<button class="tablinks" onclick="openCity(event, 'azimutvinkel')">Azimutvinkel</button>
<button class="tablinks" onclick="openCity(event, 'behorigelektriker')">Behörig elektriker</button>
<button class="tablinks" onclick="openCity(event, 'belastning')">Belastning</button>
<button class="tablinks" onclick="openCity(event, 'cemarkning')">CE-märkning</button>
<button class="tablinks" onclick="openCity(event, 'dc')">DC</button>
<button class="tablinks" onclick="openCity(event, 'effekt')">Effekt</button>
<button class="tablinks" onclick="openCity(event, 'effektbegransning')">Effektbegränsning</button>
<button class="tablinks" onclick="openCity(event, 'effektgaranti')">Effektgaranti</button>
<button class="tablinks" onclick="openCity(event, 'egenanvandel')">Egenanvänd el</button>
<button class="tablinks" onclick="openCity(event, 'elhandelsforetag')">Elhandelsföretag</button>
<button class="tablinks" onclick="openCity(event, 'elproducent')">Elproducent</button>
<button class="tablinks" onclick="openCity(event, 'elsakerhetsintyg')">Elsäkerhetsintyg</button>
<button class="tablinks" onclick="openCity(event, 'falsatplattak')">Falsat plåttak</button>
<button class="tablinks" onclick="openCity(event, 'huvudsakring')">Huvudsäkring</button>
<button class="tablinks" onclick="openCity(event, 'inverter')">Inverter (växelriktare)</button>
<button class="tablinks" onclick="openCity(event, 'jordfelsbrytare')">Jordfelsbrytare</button>
<button class="tablinks" onclick="openCity(event, 'kilowatt')">Kilowatt (kW)</button>
<button class="tablinks" onclick="openCity(event, 'kilowattimme')">Kilowattimme (kWh)</button>
<button class="tablinks" onclick="openCity(event, 'likstrom')">Likström</button>
<button class="tablinks" onclick="openCity(event, 'lutningpatak')">Lutning på tak</button>
<button class="tablinks" onclick="openCity(event, 'monokristallin')">Monokristallin</button>
<button class="tablinks" onclick="openCity(event, 'mppt')">MPPT</button>
<button class="tablinks" onclick="openCity(event, 'markeffekt')">Märkeffekt</button>
<button class="tablinks" onclick="openCity(event, 'noct')">NOCT</button>
<button class="tablinks" onclick="openCity(event, 'natbolag')">Nätbolag</button>
<button class="tablinks" onclick="openCity(event, 'optimerare')">Optimerare</button>
<button class="tablinks" onclick="openCity(event, 'paneltyp')">Paneltyp</button>
<button class="tablinks" onclick="openCity(event, 'pascal')">Pascal (PA)</button>
<button class="tablinks" onclick="openCity(event, 'plattaktrapets')">Plåttak trapets</button>
<button class="tablinks" onclick="openCity(event, 'plattakfalsat')">Plåttak falsat</button>
<button class="tablinks" onclick="openCity(event, 'rails')">Rails</button>
<button class="tablinks" onclick="openCity(event, 'rotavdrag')">Rotavdrag</button>
<button class="tablinks" onclick="openCity(event, 'servissakring')">Servissäkring</button>
<button class="tablinks" onclick="openCity(event, 'snolastberakning')">Snölastberäkning</button>
<button class="tablinks" onclick="openCity(event, 'solcell')">Solcell</button>
<button class="tablinks" onclick="openCity(event, 'solpanel')">Solpanel</button>
<button class="tablinks" onclick="openCity(event, 'spanning')">Spänning (V)</button>
<button class="tablinks" onclick="openCity(event, 'stc')">STC</button>
<button class="tablinks" onclick="openCity(event, 'strang')">Sträng</button>
<button class="tablinks" onclick="openCity(event, 'strom')">Ström</button>
<button class="tablinks" onclick="openCity(event, 'tegeltak')">Tegeltak</button>
<button class="tablinks" onclick="openCity(event, 'toppeffekt')">Toppeffekt</button>
<button class="tablinks" onclick="openCity(event, 'verkningsgrad')">Verkningsgrad</button>
<button class="tablinks" onclick="openCity(event, 'vindlastberakning')">Vindlastberäkning</button>
<button class="tablinks" onclick="openCity(event, 'volt')">Volt (V)</button>
<button class="tablinks" onclick="openCity(event, 'vaxelriktare')">Växelriktare</button>
<button class="tablinks" onclick="openCity(event, 'vaxelstrom')">Växelström</button>
<button class="tablinks" onclick="openCity(event, 'watt')">Watt (W)</button>
<button class="tablinks" onclick="openCity(event, 'overskottsel')">Överskottsel</button>
<button class="tablinks" onclick="openCity(event, 'overspannigsskydd')">Överspänningsskydd</button>



</div>


<div class="tabcontent" id="AC-brytare">
<h3>Vad &auml;r en AC-brytare?</h3>

<p>AC-brytare krävs för att koppla bort växelriktaren från elnätet vid service och underhåll. Nätbolaget skall alltid ha möjlighet att slå ifrån anläggningen. Brytaren placeras bredvid eller i närheten av växelriktaren för att göra det enklare att frånskilja växelriktaren. </p>

 



<script>function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();</script>
   
</body>
</html> 

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...