Jump to content

Why does position sticky not work?

speedbird

By speedbird
in CSS

 Share

Recommended Posts

speedbird Newbie

speedbird

Posted
Posted

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 comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...